运用canvas将两张图拼接成一张图

黎轩栀海

已于 2022-08-05 15:26:11 修改

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： canvas

于 2019-04-15 11:27:13 首次发布

本文链接：https://blog.csdn.net/yuan_jlj/article/details/89308728


<template>
  <div>
    <img src="../assets/0001.jpg" id="img1" style="display: block" width="500" height="750" />
    <img src="../assets/0002.jpg" id="img2" style="display: block" width="500" height="750" />
    <img id="img3" />

    <button @click="draw()" id="btn">点击下载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    draw() {
      var img1 = document.getElementById("img1"),
        img2 = document.getElementById("img2"),
        img3 = document.getElementById("img3");
      img1.width = 500;
      img1.height = 750;
      img2.width = 500;
      img2.height = 750;
      var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");
      canvas.width = img1.width;
      canvas.height = img1.height * 2;
      canvas.style.letterSpacing = "10px";
      // 将 img1 加入画布
      context.drawImage