Canvas神器html2canvas，让你轻松截图

告诉你件很厉害的事情，利用Canvas就能轻松完成截图。是不是超棒呀？

咱们先聊聊为啥这设计很重要，对不对？快捷键用多了难免混淆不清，因此我们决定开始就让用户随心所欲地设置。究竟该如何做？只需借助数组传递参数就能搞定！这下子，想要设置几个快捷键都没问题！

<pre class="brush:js;”>
function screenShot(quickStartKey, EndKey) {
//兼容性考虑不使用…扩展字符串
var keyLength = quickStartKey.length
var isKeyTrigger = {}
var cantStartShot = false
…
quickStartKey.forEach(function(item) { //遍历参数数组
isKeyTrigger[item] = false //默认数组中所有键都没有触发
})
$(‘html’).on(‘keyup’, function(e) {
var keyCode = e.which
if(keyCode === EndKey) {
…
} else if(!cantStartShot) {
isKeyTrigger[keyCode] = true
var notTrigger = Object.keys(isKeyTrigger).filter(function(item) {
return isKeyTrigger[item] === false //查看有没有需要触发的快捷键
})
if(notTrigger.length === 0) { //没有需要触发的快捷键即可以开始截图
cantStartShot = true
beginShot(cantStartShot)
}
}
})

你知道啥叫DOM画成canvas屏幕覆盖么？知道的话就去网上搜”DOM画到canvas”的教程看看具体该咋做。这个任务有点麻烦先得自己搞定一张SVG图片（全是XML元素）。然后，还有件更头疼的事儿，得搞清楚咋算浏览器里的DOM元素并把它们拖出来。不怕不怕！小编这儿有个神器——html2canvas，真是解决问题的好帮手！

接着讨论那个模型手绘截图的事。那时我还想用Canvas API解决，不过后来发现有些困难。跟PS似地，首先得在屏幕上拿着鼠标搞个画图区域，之后每挪个位置还要重新再画一次，最后把以前的删除掉，这样似乎才能称得上是实时绘制。但是，我翻来覆去找遍了所有资料，就是不知道怎么用纯粹的Canvas来实现。其实，有谁知道怎么加画布标签的话，别忘了告诉我

function beginShot(cantStartShot) {
    if(cantStartShot) {
        html2canvas(document.body, {
            onrendered: function(canvas) {
                //得到与界面一致的canvas图像
            }
        })
    }
}

别焦躁。试试看这个名叫Jcanvas的家伙，它就是以Jq为基础做成的神奇工具。这其中最好玩的部分就是图层！你想怎么搞就怎么搞，给每个图层都定个名儿也行。用上它，事情就变得轻松多了对不对？一切问题交给Jcanvas就没毛病！

Canvas画板里截图，主要就是提取图像数据，接着用’toDataURL’这个方法把图像变成能看明白的base64代码，搞定咯！

最后了，咱们来聊聊咋保存图片！这回，就靠a标签里面那个”download”属性，点击就能直接下了！

$('#' + canvasId).mousedown(function(e) {
    $("#"+canvasId).removeLayer(layerName) //删除上一图层
    layerName += 1
    startX = that._calculateXY(e).x //计算鼠标位置
    startY = that._calculateXY(e).y
    isShot = true
    $("#"+canvasId).addLayer({
        type: 'rectangle', //矩形
        ...
        name:layerName, //图层名称
        x: startX,
        y: startY,
        width: 1,
        height: 1
    })
}).mousemove(function(e) {
    if(isShot) {
        $("#"+canvasId).removeLayer(layerName)
        var moveX = that._calculateXY(e).x
        var moveY = that._calculateXY(e).y
        var width = moveX - startX
        var height = moveY - startY
        $("#"+canvasId).addLayer({
            type: 'rectangle',
            ...
            name:layerName,
            fromCenter: false,
            x: startX,
            y: startY,
            width: width,
            height: height
        })
        $("#"+canvasId).drawLayers(); //绘制
    }
    })

咔咔，全都弄好了！希望这些小知识点能让你学习棒棒哒！记得常来看看今天暂时先这样！期待你们喜欢。想问啥或给建议就在下边留言呗。别忘了点赞分享一气呵成，让更多人知道这个推送咯。谢谢大家伙儿！

var canvasResult = document.getElementById('canvasResult')
              var ctx = canvasResult.getContext("2d");
              ctx.drawImage(copyDomCanvas, moveX - startX > 0 ? startX : moveX, moveY - startY > 0 ? startY : moveY, width, height, 0, 0, width, height )
              var dataURL = canvasResult.toDataURL("image/png");