基于canvas生成图片

calx 发布于2019-08-22 17:01 / 2605人阅读

摘要：本文将介绍如何生成一张海报图片，以及可能会碰到的问题和解决方案。转图片目前移动端浏览器对于的支持非常好，而可以通过来转换成图片。

随着APP的获客成本越来越高，很多产品开始从wap页引流，而最常见的方式便是分享，尤其是在微信中。因此诞生了一些新玩法，比如生成一张海报图片，用户可以保存或分享到其他平台。

本文将介绍如何生成一张海报图片，以及可能会碰到的问题和解决方案。

canvas转图片

目前移动端浏览器对于canvas的支持非常好，而canvas可以通过toDataURL来转换成base64图片。

市场上的一些js库，如：html2canvas、dom-to-image，其本质也是通过toDataURL来转换成图片。但我个人不太建议使用这类js库，因为你可能需要填很多坑，结果也并不一定能达到你的期望，所以还是老老实实用canvas画出来吧。

外链图片

最重要也是最复杂的便是对外链图片的处理，canvas绘图时不会有任何问题，但是调用toDataURL这个方法时，浏览器会报错。

跨域

你请求的外域图片，可能会暴露你的隐私，所以浏览器为了保护你的隐私限制了这样的请求。

我们可以设置crossOrigin为anonymous来允许跨域，浏览器会为这张图片的请求头附带Origin信息，告诉静态资源服务器，请在响应头中附带Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便浏览器放行。

但是有些时候，设置了crossOrigin依然会报错，其实不是设置了没有作用，而是cdn缓存了服务器响应结果，这个结果往往是没有上述两个字段的。这个时候可以考虑给图片链接后追加时间戳，对于cdn来说，这是一个没有请求过的资源，因此它会从源服务器去拿数据。

代码示例如下：

var img = new Image()
img.crossOrigin = "anonymous"
img.onload = function () {
  // 在图片加载完成后绘图，避免空白和断断续续加载
  ctx.drawImage(img, 0, 0)
}
img.src = "https://xxxx" + "?" + (+new Date())

保存图片

a标签有一个download属性，可以将指定的资源下载下来，但该方法只适用于pc端，移动端基本不支持（Safari会打开一个base64的网页，而在微信中甚至不会有任何响应，更不用提众多的安卓机）。

既然不能在浏览器主动保存图片，我们只好另辟蹊径，经调研发现：现在绝大多数的移动端浏览器都支持长按图片唤起下拉菜单来保存，因此我们可以通过文案提示用户进行操作，但它的弊端是没有API来调用，也就是说只能提示用户自发地进行长按保存操作，而我们对于用户是否保存了图片是无感知的。

文末总结

对于目前的产品需求，长按图片保存基本能够满足要求。所以，目前的做法是：通过canvas绘制一张海报图片，将其转换为base64图片，创建img标签并渲染到视图上，文字提示用户长按可以保存（只有在图片上长按才有效）。

示例代码：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

canvas.width = 300
canvas.height = 300

// 画圆
ctx.fillStyle = "yellow"
ctx.fillRect(0, 0, 50, 100)

ctx.strokeStyle = "blue"
ctx.strokeRect(0, 120, 50, 100)

var img = new Image()
img.onload = () => {
  // 画图片
  ctx.drawImage(img, 60, 0)
  // toImage
  var dataImg = new Image()
  dataImg.src = canvas.toDataURL("image/png")
  document.body.appendChild(dataImg) // 长按图片保存
}
img.crossOrigin = "anonymous"
img.src = "https://nos.netease.com/easyread/fle/a0df1d4009c7a2ec5fee/1524215500140/avatar.png?" + (+new Date())

云服务器 GPU云服务器生成图片生成圆角图片文字生成图片图片生成视频

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

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

基于html2canvas实现网页保存为图片及图片清晰度优化

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。小结是目前实现网页保存为图片功能的综合最佳选择。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。 ...

JerryWangSAP 2019-08-30 13:45 评论0 收藏0
基于html2canvas实现网页保存为图片及图片清晰度优化

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。小结是目前实现网页保存为图片功能的综合最佳选择。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。 ...

mayaohua 2019-08-01 17:44 评论0 收藏0
基于html2canvas实现网页保存为图片及图片清晰度优化

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。小结是目前实现网页保存为图片功能的综合最佳选择。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。 ...

denson 2019-08-21 16:56 评论0 收藏0
基于node-canvas 和　express 的一款图片格式转换工具

摘要：基于和的一款图片格式转换工具完善后会发布成由于本项目当前是，还有很多不足支出，希望大家能指正，共勉。中请求发送必须使用发送数据并且在启动之前需要对做处理，使用做处理并且设置中的为这样后端才能正常接收并解析请求中所携带的数据。基于node-canvas 和　express 的一款图片格式转换工具,完善后会发布成npm 由于本项目当前是Version@0.0.1，还有很多不足支出，希望大...

zhoutk 2019-08-20 18:10 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0