Canvas实现保存图片到本地的示例代码


Posted in HTML / CSS onJune 28, 2018

一、简介

需求: 将HTML5的内容保存为图片
思路: 通过Canvas绘图生成base64图片,长按即可保存到本地
问题: canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩

二、具体问题

问题1:canvas是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误

Canvas实现保存图片到本地的示例代码

解决:<img>标签通过引入 crossorigin 属性能解决跨域, 即crossOrigin="Anonymous" 或 crossOrigin="*"  请注意手q环境下设置 ‘Anonymous’不支持,需要设置为 '*',如果使用 crossorigin="anonymous",则相当于匿名 CORS

问题2:设置了”crossOrigin”的<img>标签不能拉下跨域的图片,无法触发img.onload

Canvas实现保存图片到本地的示例代码

解决: 后台转发或nigix代理,设置Access-Control-Allow-Origin:“wx.qlogo.cn”,允许静态资源服务器图片跨域这种设置 解决获取图片跨域的问题。(此处图片为用户头像域名wx.qlogo.cn,存在跨域问题)

Canvas实现保存图片到本地的示例代码

Canvas实现保存图片到本地的示例代码

问题3:安卓手机微信h5长按不能保存base64图片

解决:将canvas绘制的base64图片上传到服务器上,再从服务器上获取到png(jpg)图片。这种做法较麻烦,后面还需要找方法改进。

问题4:上传到服务器的图片压缩严重

解决:上传的图片会在服务器有几个资源,压缩度不一,从目录 'http://img10.360buyimg.com/promotepic/' 可拿到像素较清晰的图片。

问题5:绘制的二维码链接(//wqs.jd.com/xxx)长按不能直接进入页面

解决:指定要绘制的二维码链接一定要加上http: 否则二维码将识别为文字

//canvas绘制部分代码:

var picurl = "http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0";
   var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
      //后台nigix代理 参见问题2
      src = picurl.replace("http://wx.qlogo.cn","//wq.jd.com");
      //解决 canvas 跨域 toDataURL不能读取问题 参见问题1
      img.crossOrigin = "Anonymous";
      //图片资源的预加载
       img.onload = function() {
             canvas.width = img.width;
            canvas.height = img.height;
             ctx.drawImage( img, 0, 0 );
            //将画好的base64图片
             localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
      }
       img.src = src;

上传图片部分代码:

// 上传图片 参见问题3
$.ajax({
    type: 'POST',
    url:  loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', "j132"),
    data: {
        filename: new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg',
        content: base64pic,
        active: "shotpic20160901"
    },
    dataType: 'json',
    xhrFields: { withCredentials: true },
    success: function(data) {
                           if (picdata.id == 1 && picdata.msg) {
                                    //图片路径 此前缀路径的图片最清晰 参见问题4
                                    var imgPre = 'http://img10.360buyimg.com/promotepic/';
                                    //图片地址拼接的完整地址链接
                                    var photo = imgPre + picdata.msg;
                                    $("#cardImg")[0].onload = function() {
                                             //to do 业务逻辑
                                    };
                                    $("#cardImg").attr("src",photo);
                           }
    },
    error:function(data){
    }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 #HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 #HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 #HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 #HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 #HTML / CSS
详解android与HTML混合开发总结
Jun 06 #HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 #HTML / CSS
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php 移除数组重复元素的一点说明
2008/11/27 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python中的全局变量用法分析
2015/06/09 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
django 实现简单的插入视频
2020/04/07 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
优秀演讲稿范文
2013/12/29 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
班委竞选稿范文
2015/11/21 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL