前端fabric.js绘制多张图片，并通过mycanvas.toDataURL获取base64转换后，进行分割切割生成多个canvas图片

已于 2022-07-04 14:51:32 修改
阅读量3.5k 收藏 1
点赞数
文章标签： javascript 前端
于 2021-04-14 10:50:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaojingzhen36/article/details/115692917
版权

实现思路如下：

  1. 通过fabric.js绘制多张图片，同理这一步也可以直接使用canvas绘制多张图片；
  2. 通过save()将整个绘制的canvas的内容转成base64数据，然后onload方法后对图片进行剪切操作；
  3. 分割的方法主要就是canvas的putImageData

以下两个demo略有不同：

1、直接渲染canvas

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }

      #mycanvas {
        background-color: red;
        border: 1px solid #000000;
      }

      img {
        margin: 20px;
      }

      .box {
        position: fixed;
        top: 100px;
        right: 0;
      }
    </style>
  </head>

  <body>
    <h3>使用canvas实现切图的效果 <button type="button" onclick="save()">按钮</button></h3>
    <div class="box" id="box">

    </div>
    <div class="mycanvas">
      <canvas id="mycanvas" width="300" height="800"></canvas>
    </div>

    <script src="fabric.min.js"></script>
    <script>
      var mycanvas = new fabric.Canvas('mycanvas');

      fabric.Image.fromURL('2.jpg', function(oImg) {
        oImg.set('selectable', false);
        mycanvas.add(oImg);
      });

      fabric.Image.fromURL('2.jpg', function(oImg) {
        oImg.set('selectable', false);
        oImg.set({
          top: 300
        })
        mycanvas.add(oImg);
      });

      mycanvas.setAttribute('height', 200)


      function save() {
        mycanvas.setBackgroundColor("blue");
        const base64 = mycanvas.toDataURL({
          format: 'jpeg',
          quality: 1,
        });
        console.log(base64)

        var imgToCut = new Image();
        imgToCut.src = base64;

        imgToCut.onload = function() {
          cutImage(this);
        };
      }

      function cutImage(img) {
        var h = img.height,
          w = img.width;
        //创建Canvas
        var oCanvas = createCanvas(w, h);
        //拿到canvas的ctx
        var ctx = oCanvas.getContext('2d');

        //先drawImage，然后getImageData
        ctx.drawImage(img, 0, 0, w, h);

        var imageData = ctx.getImageData(0, 0, w, h);

        resolveCut(imageData, 0, 0, 300, 150);
        resolveCut(imageData, 0, 150, 300, 150);

        document.getElementById('box').removeChild(oCanvas);
      }

      function resolveCut(imgData, x, y, w, h) {
        console.log(x, y, w, h);
        var cvs = createCanvas(w, h);
        var ctx = cvs.getContext("2d");

        ctx.putImageData(imgData, -x, -y);
      }

      function createCanvas(w, h) {
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);
        document.getElementById('box').appendChild(canvas);
        return canvas;
      }
    </script>

  </body>

</html>

 2、先拿到canvas的base64，然后渲染成图片

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }

      #mycanvas {
        background-color: red;
        border: 1px solid #000000;
      }

      img {
        margin: 0;
        display: block;
      }

      .box {
        position: fixed;
        top: 100px;
        right: 0;
      }
    </style>
  </head>

  <body>
    <h3>使用canvas实现九宫格切图的效果 <button type="button" onclick="save()">按钮</button></h3>
    <div class="box" id="box">

    </div>
    <div class="mycanvas">
      <canvas id="mycanvas" width="300" height="800"></canvas>
    </div>

    <script src="fabric.min.js"></script>
    <script>
      var mycanvas = new fabric.Canvas('mycanvas');

      fabric.Image.fromURL('2.jpg', function(oImg) {
        oImg.set('selectable', false);
        mycanvas.add(oImg);
      });

      fabric.Image.fromURL('2.jpg', function(oImg) {
        oImg.set('selectable', false);
        oImg.set({
          top: 300
        })
        mycanvas.add(oImg);
      });

      function save() {
        mycanvas.setBackgroundColor("blue");
        const base64 = mycanvas.toDataURL({
          format: 'jpeg',
          quality: 1,
        });
        console.log(base64)

        var imgToCut = new Image();
        imgToCut.src = base64;

        imgToCut.onload = function() {
          cutImage(this);
        };
      }

      function cutImage(img) {
        var h = img.height,
          w = img.width;
        //创建Canvas
        var oCanvas = createCanvas(w, h);
        //拿到canvas的ctx
        var ctx = oCanvas.getContext('2d');

        //先drawImage，然后getImageData
        ctx.drawImage(img, 0, 0, w, h);

        var imageData = ctx.getImageData(0, 0, w, h);

        resolveCut(imageData, 0, 0, 300, 150);
        resolveCut(imageData, 0, 150, 300, 150);

        // document.getElementById('box').removeChild(oCanvas);
      }

      function resolveCut(imgData, x, y, w, h) {
        console.log(x, y, w, h);
        var cvs = createCanvas(w, h);
        var ctx = cvs.getContext("2d");

        ctx.putImageData(imgData, -x, -y);
        
         var imgDom = document.createElement('img');
         imgDom.setAttribute('src', cvs.toDataURL('image/jpeg')); // base 64
         document.getElementById('box').appendChild(imgDom);
      }

      function createCanvas(w, h) {
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);
        
        // document.getElementById('box').appendChild(canvas);
        return canvas;
      }
    </script>

  </body>

</html>

黑夜若不黑暗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JavaScript源代码】Vue使用鼠标在Canvas上绘制矩形.docx
12-29
Vue使用鼠标在Canvas上绘制矩形 　　本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下　　1.代码　　<template>　　 <div class="test" style="background-color: burlywood;">　　 <canvas id="myCanvas" ref="myCanvas"　　   width="460" height="240" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove">　　 </canvas>　　 </div>
js HTML5 canvas绘制图片的方法
01-19
本文实例为大家分享了HTML5 canvas绘制图片的具体代码，供大家参考，具体内容如下 demo.js [removed]=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img=new Image(); img.onload=function
【Vue】fabricjs 实现局部截图及el-image-viewer大图预览
xubuhang的专栏
02-20 422
再结合el-image-viewer可以实现大图预览局部图的效果。
使用canvas对多图片拼合并导出图片的方法
12-14
先说下canvas绘图的基本方法,如下： const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); const img = new Image(); img.src = "1.jpg"; //当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕 img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50)
js canvas实现放大镜查看图片功能
12-29
本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </head> <body style=background: black;> <canvas id=myCanvas xss=removed> 你的浏览器不支持canvas </canvas> <canvas
基于fabricJs的canvas照片编辑合成源码
01-05
基于fabric的canvas缩放移动照片合成的实用代码，兼容PC和移动端，附完整的less和js插件源文件，包含功能：裁切、移动、缩放、翻转、文字编辑、插入和删除对象、锁定和解锁对象、调整对象层级、图片合成等。
做一个会PS切图的前端开发
weixin_33775582的博客
06-20 193
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本，切图功能发生了比较大的变化，我们可以把PhotoShop CS版本时的切图功能称为传统切图，而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图，传统切图又分为全手工切图和参考线切图；...
canvas.toDataURL(type, args)
weixin_34007906的博客
01-04 213
canvas.toDataURL(type, args)该方法能够将canvas转换为图像，图像是基于Base64编码的。如果不指定两个参数，无参数调用该方法，转换的图像格式为png格式 •type:指定要转换的图像格式，如 image/png、image/jpeg等。•args:可选参数。例如，如果type为image/jpeg，则args可以是0.0和1.0之间的值，以指定图像的品质。例如...
php h5长按图片实现保存功能,借助toDataURL实现将HTML5 Canvas的内容保存为图片
weixin_39633493的博客
03-29 192
将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现，具体实现如下，感兴趣的朋友可以参考下哈，希望对你有所帮助主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现HTML + JavaScript的代码很简单。 window.onload = function() {draw();var saveButto...
canvas.toDataURL 画布导出图片
weixin_34400525的博客
04-22 477
&lt;html&gt; &lt;meta http-equiv="X-UA-Compatible" content="chrome=1"&gt; &lt;head&gt; &lt;script&gt; window.onload = function () { draw(); var saveButton = document.getElementById("
返回多张图片给前端--base64
m0_37635053的博客
10-28 6445
再下限于水平有限，多次尝试后端返回图片到前端，没有找到一种最好的方法。 1.可以用本地工程存放图片。每次返回图片在本地工程的路径就可以。 有点：简单易用，可以返回多张图片。 缺点：本地工程越来越臃肿。 2.用mongoDB存放，每次通过图片流返回前端。（这里的convertGridFSFile2Resource是针对springboot2.x以上版本，前面的博客有专门讲） @RequestMapp...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
12-29
1 前言 1.1 业务场景 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用 [removed].href 下载图片时，并不会保存到本地，会在浏览器打开。 2 实现原理 2.1 绘制画布 <el title=查看图片 visible.sync=dialogJPG > <canvas id=mycanvas width=940 height=570></canvas> </el> 这里为了交互体验，使用了 element-ui 的
Canvas.js:html5 canvas的简单类包装器（警告Canvas当前仅在chrome中使用“ use strict”）
05-11
Canvas.js html5 canvas的简单类包装器（警告！Canvas当前仅在chrome中使用“ use strict”） 例子： var id = 'myCanvas'; // id of canvas to which bind class var c = new Canvas(id); // crate new instance for canvas to use // Canvas is chainable function list (most of it's functions returns this) c.rect({ x: 20, y: 5, w: 10, h: 15 }).text({ text: 'Hello World', x: 35, y: 20, type: 'stroke' }); /* or c.rect({x:
js+html5绘制图片到canvas的方法
01-21
本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html> <body> <canvas id=myCanvas width=200 height=100 style> Your browser does ...
bpmn-js推荐几款常用的插件
飞云先生
04-30 146
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 966
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1248
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
表格隔行变色
weixin_54339833的博客
05-02 399
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
vue3引入element-plus完整步骤
最新发布
zzx262625的博客
05-06 252
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
canvas.toDataURL
04-27
`canvas.toDataURL()` 是一个 HTML5 中 canvas 元素的方法，它可以将 canvas 中的内容转换为一个 base64 编码的 URL。这个 URL 可以用于创建一个图片文件，也可以用于直接在网页中显示该图片。 例如，你可以使用以下代码将 canvas 中的内容转换为一个图片文件并下载： ```javascript let canvas = document.getElementById('myCanvas'); let dataURL = canvas.toDataURL('image/png'); let link = document.createElement('a'); link.download = 'myImage.png'; link.href = dataURL; link.click(); ``` 这段代码将会下载一个名为 `myImage.png` 的图片文件，其中图片的内容为 `myCanvas` 元素中的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值