最近在做项目时遇到遇到这样的问题。Chrome浏览器无法下载图片,显示网络错误。很是纳闷,网上也查了很多的资料发现中文的资料非常的少,所以在这里总结下。
关于图片下载不在赘述,我给出的方法是利用canvas进行图片下载。
$scope.doloadQrcode = function (qrcodeUrl, fileName) {
var basePath //图片base64地址
var $img = new Image()
$img.setAttribute('crossOrigin', 'anonymous')
$img.src = qrcodeUrl
$img.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = $img.width
canvas.height = $img.height
var ctx = canvas.getContext("2d")
ctx.drawImage($img, 0, 0)
basePath = canvas.toDataURL()
var blob = dataURItoBlob(basePath)
downloadFile(fileName, blob)
}
}
/**
* 下载图片
*
* @param {any} fileName
* @param {any} content
*/
function downloadFile(fileName, content) {
var oA = document.createElement('a');
oA.href = content;
oA.download = fileName;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
oA.dispatchEvent(event);
}
函数doloadQrcode l接受两个参数,一个是下载图片的地址,一个是可以认为是文件名。利用canvas进行转换。drawImage
中0,0是原点。canvas.toDataURL()转换成base64格式。其实非jpg格式都往下都可以了。但是往往结果并不会如意。因为一些浏览器的原理,不能直接下载图片。我们需要在这里进行base64转化为blob流的格式。下面是转化blob流的方法。
function dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
转化后就可以直接使用了。
网友评论