Introduction aux captures d'écran HTML basées sur Canvas

Cet article présente principalement une petite démo de capture d'écran implémentée en HTML basée sur Canvas, qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en apprendre davantage

Écrivez-le d'abord

.

Je me souviens avoir déjà vu un partage sur Renren, expliquant la solution de capture d'écran basée sur js. Je ne me souviens pas des détails, je me souviens juste que c'était assez intéressant et semblait utiliser du canevas. Alors cette fois, j’ai l’intention d’en écrire un moi-même pour partager avec tout le monde les idées de l’auteur. Ceci est juste une petite démo très simple. S'il y a des bugs, veuillez soumettre les problèmes. Comme d'habitude, adresse du code po.

Rendu

Idée générale

• Définir les touches de raccourci début/fin

• Après avoir démarré, dessinez le DOM dans le canevas pour couvrir l'interface DOM d'origine

• Ajoutez une zone de capture d'écran de souris de simulation de canevas

• Ajouter Un canevas est utilisé pour dessiner l'interface du navigateur correspondant à la zone de capture d'écran de la souris (capturée à partir du premier canevas)

• Enregistrer l'image capturée

1. Définir les touches de raccourci début/fin

En raison des conflits que les touches de raccourci peuvent provoquer, nous espérons que la touche de raccourci de démarrage ne pourra pas limiter le nombre de touches de raccourci, donc un tableau est utilisé dans le premier paramètre transmis dans le formulaire.

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)
      }
    }
  })

2. Dessinez le DOM dans le canevas pour couvrir l'interface DOM d'origine

Si vous utilisez la méthode native, vous pouvez vous référer à MDN pour dessiner le DOM dans toile. La partie la plus délicate est que vous devez créer une image SVG contenant du XML impliquant l'élément . Comment calculer le DOM actuellement affiché par le navigateur et l'extraire est en fait le plus fastidieux. D'accord, en fait, l'auteur n'a pas une bonne idée d'implémenter manuellement un =. =, j'ai donc choisi cette bibliothèque html2canvas pour y parvenir. La méthode d'appel générale est la suivante :

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

3. Ajouter une zone de capture d'écran de souris de simulation de canevas

L'implémentation de cet endroit était initialement prévue pour utiliser le natif. CanvasAPI, mais cela implique Un problème est qu'une fois la souris appuyée et déplacée, le canevas doit être dessiné en temps réel, ce qui conduit à un concept similaire aux couches PS. Chaque fois qu'un déplacement de la souris est effectué, un cadre de capture d'écran actuel est dessiné, mais lorsque le déplacement de la souris sera déclenché la prochaine fois, supprimez la zone de capture d'écran précédente. Ceci est utilisé pour simuler le processus de dessin en temps réel. Malheureusement, l'auteur n'a pas trouvé de moyen d'utiliser l'API native du canevas. Si c'est le cas, dites-moi comment marquer les images dessinées. Ici, l'auteur utilise une bibliothèque de canevas basée sur Jq appelée Jcanvas, qui donne le concept de calques, c'est-à-dire qu'une seule image peut être dessinée sur un calque et le calque peut être marqué d'un nom. Cela répond aux besoins de l'auteur et est implémenté comme suit :

$('#' + 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(); //绘制
    }
    })

4 Ajouter un canevas pour dessiner l'interface du navigateur correspondant à la zone de capture d'écran de la souris

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");

L'image est interceptée via drawImage, puis la méthode toDataURL est utilisée pour convertir l'image en codage base64

5 Enregistrez l'image interceptée

function downloadFile(el, fileName, href){
      el.attr({
        'download':fileName,
        'href': href
      })
  }
  ...
downloadFile($('.ok'), 'screenShot' + Math.random().toString().split('.')[1] || Math.random()  + '.png', dataURL)
// 传入按键对象、图像保存随机名、base64编码的图像

qui. utilise un L'attribut download de la balise permet à l'utilisateur de télécharger directement après avoir cliqué dessus.

Déploiement

Dépendances

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jcanvas/16.7.3/jcanvas.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

Configurer les touches de raccourci

screenShot([16, 65], 27) // 开始快捷键设置为shift+a；退出键为ESC

Enfin

La partie la plus dégoûtante de l'article (écriture DOM sur canevas, couche de configuration du canevas) est implémentée en utilisant respectivement deux bibliothèques. L'auteur continuera à prêter attention à la façon de le faire. implémentez-le à l'avenir. Utilisez l'API native pour implémenter ces opérations, même si je pense personnellement qu'il est un peu mieux de l'écrire vous-même. .

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

code canevas pour simuler les grattages de loterie électronique

Comment utiliser HTML5 Canvas pour dessiner des ombres effets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!