基于canvas生成图片

随着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())
复制代码