使用 Blob 和 msSaveBlob 以本地方式保存文件

由 匿名 (未验证) 提交于 2019-12-03 00:43:02

本主题从使用 Web 存储以本地方式保存文件Blobwindow.navigator.msSaveBlobwindow.navigator.msSaveOrOpenBlob

本主题包含下列部分：

注意

BlobmsSaveBlobmsSaveOrOpenBlob

请注意，msSaveBlobmsSaveOrOpenBlob按钮，而后者不但提供“保存”按钮，还提供“打开”按钮。

BlobmsSaveBlob/msSaveOrOpenBlob

示例 1

JavaScript

<!DOCTYPE html> <html>  <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">   <title>Example 1</title> </head>  <body>   <h1>Example 1</h1>   <script>     var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);       window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.     alert('File save request made using msSaveBlob() - note the single "Save" button below.');      var fileData = ["Before you insult a person, walk a mile in their shoes. That way, when you insult them, you'll be a mile away - and have their shoes."];     blobObject = new Blob(fileData);     window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt'); // Now the user will have the option of clicking the Save button and the Open button.     alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');   </script> </body>  </html>



Blob()构造函数，我们首先创建一个 Blob 对象，其参数是包含所需文件内容的数组：

var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);

blobObject

window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');

注意msSaveBlob_testFile.txt

msSaveOrOpenBlob和“打开”选项。

Blob

示例 2

JavaScript
<!DOCTYPE html> <html>  <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">   <title>Example 2</title> </head>  <body>   <h1>Example 2</h1>   <script>     function requiredFeaturesSupported() {       return ( BlobConstructor() && msSaveOrOpenBlobSupported() );     }      function BlobConstructor() {       if (!window.Blob) {         document.getElementsByTagName('body')[0].innerHTML = "<h1>The Blob constructor is not supported - upgrade your browser and try again.</h1>";         return false;       } // if        return true;     } // BlobConstructor      function msSaveOrOpenBlobSupported() {       if (!window.navigator.msSaveOrOpenBlob) { // If msSaveOrOpenBlob() is supported, then so is msSaveBlob().         document.getElementsByTagName('body')[0].innerHTML = "<h1>The msSaveOrOpenBlob API is not supported - try upgrading your version of IE to the latest version.</h1>";                     return false;       } // if        return true;     } // msSaveOrOpenBlobSupported      if (requiredFeaturesSupported()) {       var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);        window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');       alert('File save request made using msSaveBlob() - note the single "Save" button below.');        var fileData = ["Before you insult a person, walk a mile in their shoes. That way, when you insult them, you'll be a mile away - and have their shoes."];       blobObject = new Blob(fileData);       window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');       alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');     }   </script> </body>  </html>

将文件保存到客户端后，下一步是从保存的文件中检索数据。以下示例基于读取本地文件和使用 Web 存储以本地方式保存文件canvas

  1. 使用鼠标或手指（仅触摸设备）在框内创建一个绘图。
  2. 单击“保存”按钮，然后在“信息栏”中单击得到的“保存”按钮。
  3. x。
  4. 单击“擦除”按钮。
  5. 单击“加载”按钮，然后单击得到的“浏览”按钮并选择以前保存的绘图文件。随即将显示保存的绘图。

请注意，绘图保存后，跳过第 4 步可允许用户合成多个绘图。

示例 3

JavaScript
<!DOCTYPE html> <html>  <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">   <title>Example 3</title>   <style>     html {       -ms-touch-action: none; /* Capture all touch events for our own purposes. */      text-align: center;     }      #hideWrapper {        display: none; /* Do not show the file picker dialog until we're ready to do so. */     }       </style> </head>  <body>   <h1>Example 3</h1>   <canvas id="drawingSurface" width="500" height="500" style="border:1px solid black;">   </canvas> <!-- The canvas element can only be manipulated via JavaScript -->   <div>     <button id="erase">Erase</button>     <button id="save">Save</button>     <button id="load">Load</button>   </div>     <div id="hideWrapper">     <p>Select one of your saved canvas drawings to display:</p>     <input type="file" id="fileSelector" /> <!-- By design, if you select the exact same files two or more times, the 'change' event will not fire. -->   </div>       <script>     function requiredFeaturesSupported() {       return (                 BlobConstructorSupported() &&                 msSaveOrOpenBlobSupported() &&                 canvasSupported() &&                 fileApiSupported()              );     } // requiredFeaturesSupported      function BlobConstructorSupported() {       if (!window.Blob) {         document.getElementsByTagName('body')[0].innerHTML = "<h1>The Blob constructor is not supported - upgrade your browser and try again.</h1>";         return false;       } // if        return true;     } // BlobConstructorSupported      function msSaveOrOpenBlobSupported() {       if (!window.navigator.msSaveOrOpenBlob) { // If msSaveOrOpenBlob() is supported, then so is msSaveBlob().         document.getElementsByTagName('body')[0].innerHTML = "<h1>The msSaveOrOpenBlob API is not supported - upgrade Internet Explorer and try again.</h1>";                     return false;       }        return true;     } // msSaveOrOpenBlobSupported      function canvasSupported() {       if (!document.createElement('canvas').getContext) {         document.getElementsByTagName('body')[0].innerHTML = "<h1>Canvas is not supported - upgrade your browser and try again.</h1>";                           return false;       }        return true;     } // canvasSupported        function fileApiSupported() {       if (document.getElementById('fileSelector').files && window.FileReader) {         return true;               }       else {         document.getElementsByTagName('body')[0].innerHTML = "<h1>The File API is not sufficiently supported - upgrade your browser and try again.</h1>";                     return false;             }     } // fileSelectorSupported            if ( requiredFeaturesSupported() ) {           var canvas = document.getElementById('drawingSurface'); // A static variable, due to the fact that one or more local functions access it.       var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.        context.fillStyle = "purple"; // Because purple is cool.        if (window.navigator.msPointerEnabled) {         canvas.addEventListener('MSPointerMove', paintCanvas, false);       }       else {         canvas.addEventListener('mousemove', paintCanvas, false);       }        document.getElementById('erase').addEventListener('click', eraseCanvas, false);       document.getElementById('save').addEventListener('click', saveCanvas, false);       document.getElementById('load').addEventListener('click', loadCanvas, false);        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false); // Add an onchange event listener for the <input id="fileSelector"> element.           } // if ( requiredFeaturesSupported() )      function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.       context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.     }      function saveCanvas() {       var drawingFileName = "canvas" + Math.round( (new Date()).getTime() / 1000 ) + ".txt"; // Produces a unique file name every second.       var blobObject = new Blob( [canvas.toDataURL()] ); // Create a blob object containing the user's drawing.        window.navigator.msSaveBlob(blobObject, drawingFileName); // Copy the blob object content and save it to a file.       document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen if the Save button gets clicked.           } // saveCanvas      function eraseCanvas() {       context.clearRect(0, 0, context.canvas.width, context.canvas.height);       document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen if the Erase button gets clicked.     } // eraseCanvas      function loadCanvas() {       document.getElementById('hideWrapper').style.display = 'block'; // Unhide the file picker dialog so the user can select a saved canvas drawing to load into the canvas element.        } // loadCanvas            function handleFileSelection(evt) {           var files = evt.target.files; // The file selected by the user (as a FileList object).        if (!files) {         alert("The selected file is invalid - do not select a folder. Please reselect and try again.");         return;       }        // "files" is a FileList of file objects. Try to display the contents of the selected file:       var file = files[0]; // The way the <input> element is set up, the user cannot select multiple files.        if (!file) {         alert("Unable to access " + file.name.toUpperCase() + "Please reselect and try again.");          return;       }       if (file.size == 0) {         alert("Unable to access " + file.name.toUpperCase() + " because it is empty. Please reselect and try again.");         return;       }       if (!file.type.match('text/.*')) {         alert("Unable to access " + file.name.toUpperCase() + " because it is not a known text file type. Please reselect and try again.");         return;       }        // Assert: we have a valid file.        startFileRead(file); // Asychronously fire off a file read request.             document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen since we have a valid file.           } // handleFileSelection      function startFileRead(fileObject) {       var reader = new FileReader(); //        // Set up asynchronous handlers for file-read-success, file-read-abort, and file-read-errors:       reader.onloadend = displayDrawing; // "onloadend" fires when the file contents have been successfully loaded into memory.       reader.abort = handleFileReadAbort; // "abort" files on abort.       reader.onerror = handleFileReadError; // "onerror" fires if something goes awry.        if (fileObject) { // Safety first.         reader.readAsText(fileObject); // Asynchronously start a file read thread. Other supported read methods include readAsArrayBuffer() and readAsDataURL().       }       else {         alert("fileObject is null in startFileRead().");       }     } // startFileRead      function displayDrawing(evt) {       var img = new Image(); // The canvas drawImage() method expects an image object.        img.src = evt.target.result; // Obtain the file contents, which was read into memory (whose format is a text data URL string).       // eraseCanvas(); To allow composite drawings, remove this comment.       img.onload = function() { // Only render the saved drawing when the image object has fully loaded the drawing into memory.         context.drawImage(img, 0, 0); // Draw the image starting at canvas coordinate (0, 0) - the upper left-hand corner of the canvas.       } // img.onload */     } // displayFileText      function handleFileReadAbort(evt) {       alert("File read aborted.");     } // handleFileReadAbort      function handleFileReadError(evt) {       switch (evt.target.error.name) {         case "NotFoundError":           alert("The file could not be found at the time the read was processed.");           break;         case "SecurityError":           alert("A file security error occured.");           break;         case "NotReadableError":           alert("The file cannot be read. This can occur if the file is open in another application.");           break;         case "EncodingError":           alert("The length of the data URL for the file is too long.");           break;         default:           alert("File error code " + evt.target.error.name);       } // switch     } // handleFileReadError   </script> </body>  </html>

你可能尚未注意到，示例 3 中的一个特征是无法连续两次重新加载同一绘图文件。即，无法执行以下过程：

  1. 绘图显示时，单击“擦除”。
  2. 使用鼠标或手指（仅触摸设备）在框内创建一个绘图。
  3. 单击“保存”按钮，然后在“信息栏”中单击得到的“保存”按钮。
  4. x。
  5. 单击“擦除”按钮。
  6. 单击“加载”按钮，然后单击出现的“浏览”按钮并选择在第 3 步中创建的绘图文件。随即将显示保存的绘图。
  7. 单击“擦除”按钮。
  8. 单击“加载”按钮，然后单击得到的“浏览”按钮并选择在第 6 步中选择的同一绘图文件。此时不会显示该绘图。

<input type="file" id="fileSelector" /><form>

JavaScript
<div id="hideWrapper">   <p>Select one of your saved canvas drawings to display:</p>   <form>     <input type="file" id="fileSelector" />   </form> </div>     <script>

下一步是通过单击“加载”reset()

JavaScript
function loadCanvas() {   document.querySelector('#hideWrapper > form').reset(); // Allow the input element to pick the same file consecutively more than once.       document.getElementById('hideWrapper').style.display = 'block'; // Unhide the file picker dialog so the user can select a saved canvas drawing to load into the canvas element.    } // loadCanvas

此处提供此更新的示例：示例 4以查看它的源代码）。

canvas.toDataURL()canvas.msToBlob()canvas.toDataURL()PNG 文件canvas.msToBlob()，我们可以直接将文件 保存为 PNG 格式，如下所示：

JavaScript
function saveCanvas() {   var drawingFileName = "canvas" + Math.round( (new Date()).getTime() / 1000 ) + ".png"; // Produces a unique file name every second.    window.navigator.msSaveBlob(globals.canvas.msToBlob(), drawingFileName); // Save the user's drawing to a file.   document.getElementById('filePickerWrapper').style.display = 'none'; // Remove the file picker dialog from the screen since we just saved the user's file. } // saveCanvas

startFileRead(file)（及其三个关联的 回调函数）替换为以下四行代码：

JavaScript

img.src = window.URL.createObjectURL(file); img.onload = function() {    globals.context.drawImage(img, 0, 0);    window.URL.revokeObjectURL(this.src);  }



此处提供完整的示例：示例 5（右键单击网页并 选择“查看源”以查看它的源代码）。

msSaveBlobmsSaveOrOpenBlobBlob




文章转载自：https://blog.csdn.net/p312011150/article/details/78930976

本主题从使用 Web 存储以本地方式保存文件Blobwindow.navigator.msSaveBlobwindow.navigator.msSaveOrOpenBlob

本主题包含下列部分：

注意

BlobmsSaveBlobmsSaveOrOpenBlob

请注意，msSaveBlobmsSaveOrOpenBlob按钮，而后者不但提供“保存”按钮，还提供“打开”按钮。

BlobmsSaveBlob/msSaveOrOpenBlob

示例 1

JavaScript

<!DOCTYPE html> <html>  <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">   <title>Example 1</title> </head>  <body>   <h1>Example 1</h1>   <script>     var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);       window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.     alert('File save request made using msSaveBlob() - note the single "Save" button below.');      var fileData = ["Before you insult a person, walk a mile in their shoes. That way, when you insult them, you'll be a mile away - and have their shoes."];     blobObject = new Blob(fileData);     window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt'); // Now the user will have the option of clicking the Save button and the Open button.     alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');   </script> </body>  </html>



Blob()构造函数，我们首先创建一个 Blob 对象，其参数是包含所需文件内容的数组：

var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);

blobObject

window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');

注意msSaveBlob_testFile.txt

msSaveOrOpenBlob和“打开”选项。

Blob

示例 2

JavaScript
<!DOCTYPE html> <html>  <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">   <title>Example 2</title> </head>  <body>   <h1>Example 2</h1>   <script>     function requiredFeaturesSupported() {       return ( BlobConstructor() && msSaveOrOpenBlobSupported() );     }      function BlobConstructor() {       if (!window.Blob) {         document.getElementsByTagName('body')[0].innerHTML = "<h1>The Blob constructor is not supported - upgrade your browser and try again.</h1>";         return false;       } // if        return true;     } // BlobConstructor      function msSaveOrOpenBlobSupported() {       if (!window.navigator.msSaveOrOpenBlob) { // If msSaveOrOpenBlob() is supported, then so is msSaveBlob().         document.getElementsByTagName('body')[0].innerHTML = "<h1>The msSaveOrOpenBlob API is not supported - try upgrading your version of IE to the latest version.</h1>";                     return false;       } // if        return true;     } // msSaveOrOpenBlobSupported      if (requiredFeaturesSupported()) {       var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);        window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');       alert('File save request made using msSaveBlob() - note the single "Save" button below.');        var fileData = ["Before you insult a person, walk a mile in their shoes. That way, when you insult them, you'll be a mile away - and have their shoes."];       blobObject = new Blob(fileData);       window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');       alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');     }   </script> </body>  </html>

将文件保存到客户端后，下一步是从保存的文件中检索数据。以下示例基于读取本地文件和使用 Web 存储以本地方式保存文件canvas

  1. 使用鼠标或手指（仅触摸设备）在框内创建一个绘图。
  2. 单击“保存”按钮，然后在“信息栏”中单击得到的“保存”按钮。
  3. x。
  4. 单击“擦除”按钮。
  5. 单击“加载”按钮，然后单击得到的“浏览”按钮并选择以前保存的绘图文件。随即将显示保存的绘图。

请注意，绘图保存后，跳过第 4 步可允许用户合成多个绘图。

示例 3

JavaScript
<!DOCTYPE html> <html>  <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">   <title>Example 3</title>   <style>     html {       -ms-touch-action: none; /* Capture all touch events for our own purposes. */      text-align: center;     }      #hideWrapper {        display: none; /* Do not show the file picker dialog until we're ready to do so. */     }       </style> </head>  <body>   <h1>Example 3</h1>   <canvas id="drawingSurface" width="500" height="500" style="border:1px solid black;">   </canvas> <!-- The canvas element can only be manipulated via JavaScript -->   <div>     <button id="erase">Erase</button>     <button id="save">Save</button>     <button id="load">Load</button>   </div>     <div id="hideWrapper">     <p>Select one of your saved canvas drawings to display:</p>     <input type="file" id="fileSelector" /> <!-- By design, if you select the exact same files two or more times, the 'change' event will not fire. -->   </div>       <script>     function requiredFeaturesSupported() {       return (                 BlobConstructorSupported() &&                 msSaveOrOpenBlobSupported() &&                 canvasSupported() &&                 fileApiSupported()              );     } // requiredFeaturesSupported      function BlobConstructorSupported() {       if (!window.Blob) {         document.getElementsByTagName('body')[0].innerHTML = "<h1>The Blob constructor is not supported - upgrade your browser and try again.</h1>";         return false;       } // if        return true;     } // BlobConstructorSupported      function msSaveOrOpenBlobSupported() {       if (!window.navigator.msSaveOrOpenBlob) { // If msSaveOrOpenBlob() is supported, then so is msSaveBlob().         document.getElementsByTagName('body')[0].innerHTML = "<h1>The msSaveOrOpenBlob API is not supported - upgrade Internet Explorer and try again.</h1>";                     return false;       }        return true;     } // msSaveOrOpenBlobSupported      function canvasSupported() {       if (!document.createElement('canvas').getContext) {         document.getElementsByTagName('body')[0].innerHTML = "<h1>Canvas is not supported - upgrade your browser and try again.</h1>";                           return false;       }        return true;     } // canvasSupported        function fileApiSupported() {       if (document.getElementById('fileSelector').files && window.FileReader) {         return true;               }       else {         document.getElementsByTagName('body')[0].innerHTML = "<h1>The File API is not sufficiently supported - upgrade your browser and try again.</h1>";                     return false;             }     } // fileSelectorSupported            if ( requiredFeaturesSupported() ) {           var canvas = document.getElementById('drawingSurface'); // A static variable, due to the fact that one or more local functions access it.       var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.        context.fillStyle = "purple"; // Because purple is cool.        if (window.navigator.msPointerEnabled) {         canvas.addEventListener('MSPointerMove', paintCanvas, false);       }       else {         canvas.addEventListener('mousemove', paintCanvas, false);       }        document.getElementById('erase').addEventListener('click', eraseCanvas, false);       document.getElementById('save').addEventListener('click', saveCanvas, false);       document.getElementById('load').addEventListener('click', loadCanvas, false);        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false); // Add an onchange event listener for the <input id="fileSelector"> element.           } // if ( requiredFeaturesSupported() )      function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.       context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.     }      function saveCanvas() {       var drawingFileName = "canvas" + Math.round( (new Date()).getTime() / 1000 ) + ".txt"; // Produces a unique file name every second.       var blobObject = new Blob( [canvas.toDataURL()] ); // Create a blob object containing the user's drawing.        window.navigator.msSaveBlob(blobObject, drawingFileName); // Copy the blob object content and save it to a file.       document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen if the Save button gets clicked.           } // saveCanvas      function eraseCanvas() {       context.clearRect(0, 0, context.canvas.width, context.canvas.height);       document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen if the Erase button gets clicked.     } // eraseCanvas      function loadCanvas() {       document.getElementById('hideWrapper').style.display = 'block'; // Unhide the file picker dialog so the user can select a saved canvas drawing to load into the canvas element.        } // loadCanvas            function handleFileSelection(evt) {           var files = evt.target.files; // The file selected by the user (as a FileList object).        if (!files) {         alert("The selected file is invalid - do not select a folder. Please reselect and try again.");         return;       }        // "files" is a FileList of file objects. Try to display the contents of the selected file:       var file = files[0]; // The way the <input> element is set up, the user cannot select multiple files.        if (!file) {         alert("Unable to access " + file.name.toUpperCase() + "Please reselect and try again.");          return;       }       if (file.size == 0) {         alert("Unable to access " + file.name.toUpperCase() + " because it is empty. Please reselect and try again.");         return;       }       if (!file.type.match('text/.*')) {         alert("Unable to access " + file.name.toUpperCase() + " because it is not a known text file type. Please reselect and try again.");         return;       }        // Assert: we have a valid file.        startFileRead(file); // Asychronously fire off a file read request.             document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen since we have a valid file.           } // handleFileSelection      function startFileRead(fileObject) {       var reader = new FileReader(); //        // Set up asynchronous handlers for file-read-success, file-read-abort, and file-read-errors:       reader.onloadend = displayDrawing; // "onloadend" fires when the file contents have been successfully loaded into memory.       reader.abort = handleFileReadAbort; // "abort" files on abort.       reader.onerror = handleFileReadError; // "onerror" fires if something goes awry.        if (fileObject) { // Safety first.         reader.readAsText(fileObject); // Asynchronously start a file read thread. Other supported read methods include readAsArrayBuffer() and readAsDataURL().       }       else {         alert("fileObject is null in startFileRead().");       }     } // startFileRead      function displayDrawing(evt) {       var img = new Image(); // The canvas drawImage() method expects an image object.        img.src = evt.target.result; // Obtain the file contents, which was read into memory (whose format is a text data URL string).       // eraseCanvas(); To allow composite drawings, remove this comment.       img.onload = function() { // Only render the saved drawing when the image object has fully loaded the drawing into memory.         context.drawImage(img, 0, 0); // Draw the image starting at canvas coordinate (0, 0) - the upper left-hand corner of the canvas.       } // img.onload */     } // displayFileText      function handleFileReadAbort(evt) {       alert("File read aborted.");     } // handleFileReadAbort      function handleFileReadError(evt) {       switch (evt.target.error.name) {         case "NotFoundError":           alert("The file could not be found at the time the read was processed.");           break;         case "SecurityError":           alert("A file security error occured.");           break;         case "NotReadableError":           alert("The file cannot be read. This can occur if the file is open in another application.");           break;         case "EncodingError":           alert("The length of the data URL for the file is too long.");           break;         default:           alert("File error code " + evt.target.error.name);       } // switch     } // handleFileReadError   </script> </body>  </html>

你可能尚未注意到，示例 3 中的一个特征是无法连续两次重新加载同一绘图文件。即，无法执行以下过程：

  1. 绘图显示时，单击“擦除”。
  2. 使用鼠标或手指（仅触摸设备）在框内创建一个绘图。
  3. 单击“保存”按钮，然后在“信息栏”中单击得到的“保存”按钮。
  4. x。
  5. 单击“擦除”按钮。
  6. 单击“加载”按钮，然后单击出现的“浏览”按钮并选择在第 3 步中创建的绘图文件。随即将显示保存的绘图。
  7. 单击“擦除”按钮。
  8. 单击“加载”按钮，然后单击得到的“浏览”按钮并选择在第 6 步中选择的同一绘图文件。此时不会显示该绘图。

<input type="file" id="fileSelector" /><form>

JavaScript
<div id="hideWrapper">   <p>Select one of your saved canvas drawings to display:</p>   <form>     <input type="file" id="fileSelector" />   </form> </div>     <script>

下一步是通过单击“加载”reset()

JavaScript
function loadCanvas() {   document.querySelector('#hideWrapper > form').reset(); // Allow the input element to pick the same file consecutively more than once.       document.getElementById('hideWrapper').style.display = 'block'; // Unhide the file picker dialog so the user can select a saved canvas drawing to load into the canvas element.    } // loadCanvas

此处提供此更新的示例：示例 4以查看它的源代码）。

canvas.toDataURL()canvas.msToBlob()canvas.toDataURL()PNG 文件canvas.msToBlob()，我们可以直接将文件 保存为 PNG 格式，如下所示：

JavaScript
function saveCanvas() {   var drawingFileName = "canvas" + Math.round( (new Date()).getTime() / 1000 ) + ".png"; // Produces a unique file name every second.    window.navigator.msSaveBlob(globals.canvas.msToBlob(), drawingFileName); // Save the user's drawing to a file.   document.getElementById('filePickerWrapper').style.display = 'none'; // Remove the file picker dialog from the screen since we just saved the user's file. } // saveCanvas

startFileRead(file)（及其三个关联的 回调函数）替换为以下四行代码：

JavaScript

img.src = window.URL.createObjectURL(file); img.onload = function() {    globals.context.drawImage(img, 0, 0);    window.URL.revokeObjectURL(this.src);  }



此处提供完整的示例：示例 5（右键单击网页并 选择“查看源”以查看它的源代码）。

msSaveBlobmsSaveOrOpenBlobBlob



标签
canvas
blob
html代码
try
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!