js实现canvas保存图片为png格式并下载到本地的方法

2024-09-27 14:58:16

整理文档，搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法，稍微整理精简一下做下分享。

1.canvas 保存图片

2.下载到本地

function base64Img2Blob(code){

        var parts = code.split(';base64,');

        var contentType = parts[0].split(':')[1];

        var raw = window.atob(parts[1]);

        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {

         uInt8Array[i] = raw.charCodeAt(i);

        }

        return new Blob([uInt8Array], {type: contentType}); 

      }

      function downloadFile(fileName, content){

        var aLink = document.createElement('a');

        var blob = base64Img2Blob(content); //new Blob([content]);

        var evt = document.createEvent("HTMLEvents");

        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错

        aLink.download = fileName;

        aLink.href = URL.createObjectURL(blob);

        aLink.dispatchEvent(evt);

      }      

downloadFile('ship.png', canvas.toDataURL("image/png"));

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Javascript保存网页为图片借助于html2canvas库实现

第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvas.hertzen.com/ html2canvas(document.getElementById("id1"), { onrendered: function(canvas) { document.getElementById("id2").appendChild(canvas);//生成画布后如何处理,当然可以在新标签打开,在浮层展示等等 }, canvas
js实现canvas保存图片为png格式并下载到本地的方法

整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享. 1.canvas 保存图片 2.下载到本地 function base64Img2Blob(code){ var parts = code.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例

本文实例讲述了PHP实现将多个文件压缩成zip格式并下载到本地的方法.分享给大家供大家参考,具体如下: 废话不多说,直接上代码 //这里需要注意该目录是否存在,并且有创建的权限 $zipname = 'path/test.zip' //这是要打包的文件地址数组 $files = array("mypath/test1.txt","mypath/test2.pdf"); $zip = new ZipArchive(); $res = $zip->open($zi
js 将canvas生成图片保存,或直接保存一张图片的实现方法

将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click(); } canvas:传入canvas的dom对象 name:保存的图片的名字直接将图片保存的方法 function downLoadImage(img,name) { var a = documen
Js利用Canvas实现图片压缩功能

最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement
JS和Canvas实现图片的预览压缩和上传功能

先来一张效果图,压压惊第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax
js 判断上传文件大小及格式代码

我们在做文件上传时,为了实现异步上传的效果,一般会选择采用iframe的形式来进行文件的上传,但我们不能像ajax那样对服务端返回的数据进行处理,从而来进行文件大小以及文件样式的判断,所以我们一般也会想到使用js对上传的文件大小以及格式进行初步的判断,在服务端再进行一次判断(防止浏览器拒绝执行脚本文件). 以下提供一种方法用js判断文件大小. 复制代码代码如下: var url = window.location.href, type = url.substr(url.lastIndexOf(
JS+html5 canvas实现的简单绘制折线图效果示例

本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px;
js实现Form栏显示全格式时间时钟效果代码

本文实例讲述了js实现Form栏显示全格式时间时钟效果代码.分享给大家供大家参考.具体如下: 这里演示的Form栏特效时钟,显示全日期格式的时间日期效果,可显示星期几.几月几号,以往都是直接显示在网页中,而本代码是将时间显示在表单的文本框中,看一下代码就明白了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-form-input-showtime-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3
JS 对java返回的json格式的数据处理方法

如下所示: var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy":"1001BRNO1102160002","stkid":"","timeBk":"","timeBuy":"","typeBuy&q
Js中将Long转换成日期格式的实现方法

主要用于将数据库中日期用long表示,转换成YYYY-MM-DD格式或YYYY-MM-DD HH:mm:ss格式若显示为YYYY-MM-DD HH:mm:ss格式,调用如下方法: datetimeFormat(longTypeDate); 若显示为YYYY-MM-DD格式,调用如下方法: dateFormat(longTypeDate); Js中具体方法如下: /* * 时间格式化工具 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期 */

js实现canvas保存图片为png格式并下载到本地的方法

相关推荐

随机推荐