(2/2)Canvas的交互&存为图片-爬坑篇

jayzou 发布于2019-08-05 10:00 / 3332人阅读

摘要：微信长按保存失败微信安卓客户端长按保存编码格式的图片时，保存失败长按保存正常解决将编码给后台，后台处理成等常用格式的图片，返回图片保存的地址。

需求介绍

page2上的canvas可交互，并实时显示交互结果；

点击下一步，page2消失，page3显示；

page3显示的是一张图片，图片有canvas交互区和另外的一些元素组成。

实现思路 canvas重绘

运用canvas重绘的方法可以实时同步canvas的交互结果。
canvas重绘：在canvas有交互操作时，先清空画布，将canvas中所有的元素都重新画到画布上；

var fillTextArr = function(el){
        //清空画布
        el.clearRect(0, 0, width, height);
        el.beginPath();
        
        //绘制
        
        
    };

这里只需绘制封装的cavas元素对象绘制

交互只需操作封装的对象，改变对象的属性，如颜色，文本等。

图片合成 思路

如下图，点击下一步时，将底部元素绘制到cavas，最后将整体canvas取出为图片显示；

合成

合成要进行的操作

将交互区canvas绘制到缓存cachecanvas中

将图片底部绘制到cachecanvas中

cacheCanvas转换为图片

1、3两点都可以用drawImage方法实现

drawImage(_image_, _x_, _y_)
drawImage(_image_, _x_, _y_, _width_, _height_)
drawImage(_image_, _sourceX_, _sourceY_, _sourceWidth_, _sourceHeight_,
          _destX_, _destY_, _destWidth_, _destHeight_)
//第一个参数表示 ；
img标签可以解析base64编码为图片
$("#result").attr("src", dataImg);
BugList
微信中toDataURL的同源限制
微信中执行var dataImg = canvas.toDataURL("image/png");此条语句时，当前的canvas中的图片，不能有跨域的图片资源，例如：
var img = new Image();
img.src = "跨域的图片地址"；
img.onload = fucntion(){
   canvas.drawImage(img,0,0,100,100);
}

//在微信中时，本行代码不执行。
var dataImg = canvas.toDataURL("image/png");
微信长按保存失败

微信安卓客户端长按保存base64编码格式的图片时，保存失败

ios长按保存正常
解决：将base64编码给后台，后台处理成jpg等常用格式的图片，返回图片保存的地址。


ios点击闪烁
原因：移动端click事件造成；
参考信息
解决办法
给canvas添加样式
canvas {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
换成touch事件
由于使用的判断点击位置的方法依赖于:layerX 、layerY、offsetX、offsetY
var getEventPosition =  function(ev){
        var x, y;
        if (ev.layerX || ev.layerX == 0) {
            x = ev.layerX;
            y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
            x = ev.offsetX;
            y = ev.offsetY;
        }
        return {x: x, y: y};
    };
touch事件对layerX 、layerY、offsetX、offsetY支持测试如下(此处未深究，仅供参考)：

ios微信 touchstart的e.touches[0]支持，安卓不可以

微信，ios、安卓都的click都支持上述函数，都有延迟，但是ios会闪烁

微信，ios、安卓的tap都不支持上述事件


文中若有错误，还请各位大侠及时告知。

超融合服务器专线服务爬坑篇图片另存为 java图片存为黑白 js禁止图片另存为

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55518.html

(1/2)Canvas的交互&amp;存为图片-基本篇

摘要：前言公司的产品同学看到朋友圈疯传的这张图后。一拍脑袋，决定做个版本的来推广一波。需求如下文字变成可以点击的，而且还要能够变色闪瞎有木有中间的姓名换成用户的微信头像点击后，将的操作结果保存成图片，来现微信长按保存到本地的功能。前言公司的产品同学看到朋友圈疯传的这张图后。一拍脑袋，决定做个H5版本的来推广一波。 showImg(https://segmentfault.com/img/...

codecook 2019-08-05 10:00 评论0 收藏0
服务端预渲染之Nuxt - （爬坑篇）

摘要：根据官方文档在文件下面创建两个文件，分别是和。在中可以直接使用，并且是默认启用命名空间的。在中触发热更新。使用中间件中间件没有给出具体的使用文档，而是放入了一个编辑器。对配置有兴趣的可以在官方文档找到渲染文档。 Nuxt是解决SEO的比较常用的解决方案，随着Nuxt也有很多坑，每当突破一个小技术点的时候，都有很大的成就感，在这段时间里着实让我痛并快乐着。在这里根据个人学习情况，所踩过的...

cucumber 2019-08-23 17:02 评论0 收藏0
JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)

摘要：场景简介由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为，研究了下前端实现文件下载最便捷的方法还是创建标签，写入属性实现点击下载，但这在浏览器上的实现又场景简介由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为...

awesome23 2019-08-23 14:49 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 评论0 收藏0