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进度条效果
Feb 22 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP中文汉字验证码
2007/04/08 PHP
Snoopy类使用小例子
2008/04/15 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
python 中random模块的常用方法总结
2017/07/08 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
运动会入场词50字
2014/02/20 职场文书
2015年采购工作总结
2015/04/10 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL