博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS+Canvas绘画&导出图片
阅读量:2400 次
发布时间:2019-05-10

本文共 1531 字,大约阅读时间需要 5 分钟。

//下载图片到本地export function downloadIamge(imgsrc, name) {    //下载图片地址和图片名    var image = new Image();    // 解决跨域 Canvas 污染问题    image.setAttribute('crossOrigin', 'anonymous');    image.onload = function () {        var canvas = document.createElement('canvas');        canvas.width = image.width;        canvas.height = image.height;        var context = canvas.getContext('2d');        context.drawImage(image, 0, 0, image.width, image.height);        var _dataURL = canvas.toDataURL('image/png'); //得到图片的base64编码数据        var blob_ = dataURLtoBlob(_dataURL ); // 用到Blob是因为图片文件过大时,在一部风浏览器上会下载失败,而Blob就不会        var url= {            name: name || "图片.png", // 图片名称不需要加.png后缀名            src: blob_        };        if (window.navigator.msSaveOrOpenBlob) {   // if browser is IE            navigator.msSaveBlob(url.src, url.name );//filename文件名包括扩展名,下载路径为浏览器默认路径        } else {            var link = document.createElement("a");            link.setAttribute("href", window.URL.createObjectURL(url.src));            link.setAttribute("download", url.name + '.png');            document.body.appendChild(link);            link.click();        }    };    image.src = imgsrc;    function dataURLtoBlob(dataurl) {        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);        while (n--) {            u8arr[n] = bstr.charCodeAt(n);        }        return new Blob([u8arr], { type: mime });    }}

转载于:https://my.oschina.net/u/4038989/blog/3078398

你可能感兴趣的文章
Java Servlet和JSP教程(1)(转)
查看>>
Java Servlet和JSP教程(3)(转)
查看>>
Debian 安全手册 第 4 章 - 安装后(转)
查看>>
Java Servlet和JSP教程(4)(转)
查看>>
xp上的shutdown(转)
查看>>
转换RM为MP3(转)
查看>>
Java中文问题详解(转)
查看>>
制作多系统安装盘(转)
查看>>
Java Servlet和JSP教程(2)(转)
查看>>
问题实录(四)(转)
查看>>
ADO数据库编程入门(转)
查看>>
跑一圈就进入xp(转)
查看>>
Java Servlet和JSP教程(8)(转)
查看>>
在Win9x/2000下配置Apache1.3.22+Tomcat4.0.1(转)
查看>>
端口大全(转)
查看>>
Java Servlet和JSP教程(10)(转)
查看>>
怎样制作恢复光盘(转)
查看>>
关于SFV的小知识(转)
查看>>
Java Servlet和JSP教程(11)(转)
查看>>
xp中的超级命令replace(转)
查看>>