javascript - canvas下载图片到本地报错
本文介绍了javascript - canvas下载图片到本地报错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas1"></canvas>
<br /><br />
<input type="button" value="保存png图片" id="btn1" />
<a href="javascript:" id="down">下载</a>
</body>
<script>
function draw(){
var ctx=document.getElementById('canvas1').getContext('2d');
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.stroke();
}
img.src='btnNews.png';
}
draw();
var canvas = document.getElementById('canvas1');
//绑定下载事件
var btn = document.getElementById('btn1');
btn.onclick = function () {
var type = 'png';
download(type);
}
//图片下载操作,指定图片类型
function download(type) {
//设置保存图片的类型
var imgdata = canvas.toDataURL(type);
document.getElementById('down').href=imgdata;
console.log(imgdata)
//将mime-type改为image/octet-stream,强制让浏览器下载
var fixtype = function (type) {
type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
}
imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
//将图片保存到本地
var saveFile = function (data, filename) {
var link = document.createElement('a');
link.href = data;
link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
var filename = new Date().toLocaleDateString() + '.' + type;
saveFile(imgdata, filename);
}
</script>
</html>
这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义
解决方案
var imgdata = canvas.toDataURL(type);
改为
var imgdata = canvas.toDataURL('image/' + type);
这篇关于javascript - canvas下载图片到本地报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
