canvas toDataURL network error

702 阅读1分钟

canvas转为图片,有时候会出现网络错误,下载不来,原因是浏览器的下载大小限制导致

建议是最好用jpg,图片质量低,大小也小点,不用png,也可以

设置toDataURL('image/jpg', 0.1),第二参数是图片的像素质量低点,范围是0-1

google的最佳答案为,使用dataURIToBlob,不使用toDataURL

function dataURIToBlob(dataURI, callback) {
  var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
    len = binStr.length,
    arr = new Uint8Array(len);

  for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }

  callback(new Blob([arr], {
    type: type || 'image/png'
  }));
}

var callback = function(blob) {
    var a = document.createElement('a');
    a.download = fileName;
    a.innerHTML = 'download';
    // the string representation of the object URL will be small enough to workaround the browser's limitations
    a.href = URL.createObjectURL(blob);
    // you must revoke the object URL, 
    //   but since we can't know when the download occured, we have to attach it on the click handler..
    a.onclick = function() {
      // ..and to wait a frame
      requestAnimationFrame(function() {
          URL.revokeObjectURL(a.href);
        });
        a.removeAttribute('href')
      };
    };

dataURIToBlob(yourDataURL, callback);