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 选择器 属性选择器介绍
Jan 21 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
Linux下PHP连接Oracle数据库
2014/08/20 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
产品销售员岗位职责
2013/12/18 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
座谈会主持词
2014/03/20 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
统计专业自荐书
2014/07/06 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
诚信承诺书
2015/01/19 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL