react中使用canvas进行图片合成

最近react项目里需要动态变换图片里的某一个部件，然后整张图片重新加载。想了一下之前在java里是使用的ImageIO和BufferedImage进行合成的，看了一下由于项目需求是动态变换图片的，所以想的方法是利用canvas定义一个画布，然后drawImage，最后使用canvas.toDataURL转换成base64的图片，可供下载。项目代码如下，一个js文件即可实现功能。

import React, { Component } from 'react';class photoSynthesis extends React.Component {constructor(props) {super(props)this.initCanvas = this.initCanvas.bind(this)}initCanvas() {let canvas1 = document.getElementById("customCanvas");canvas1.width = 800;canvas1.height = 1300;let context1 = canvas1.getContext("2d");context1.rect(0 , 0 , canvas1.width , canvas1.height);context1.fillStyle = "#fff";context1.fill();var myImage = new Image();myImage.src = require("./diaoding.png");  //背景图片 你自己本地的图片或者在线图片myImage.crossOrigin = 'Anonymous';myImage.onload = function(){context1.drawImage(myImage , 0 , 0 , 627 , 262);// context1.font = "60px Courier New";// context1.fillText("合成的图片",350,450);var myImage2 = new Image();myImage2.src = require("./zuoce.png");  //你自己本地的图片或者在线图片myImage2.crossOrigin = 'Anonymous';myImage2.onload = function(){context1.drawImage(myImage2 , 0 , 0 , 138 , 1226);//var base64 = canvas1.toDataURL("image/png"); //"image/png" 这里注意一下//var img = document.getElementById('avatar');// document.getElementById('avatar').src = base64;//img.setAttribute('src' , base64);var myImage3 = new Image();myImage3.src = require("./houbi1.png");  //你自己本地的图片或者在线图片myImage3.crossOrigin = 'Anonymous';myImage3.onload = function(){context1.drawImage(myImage3 , 136 , 260 , 360 , 700);//var base64 = canvas1.toDataURL("image/png"); //"image/png" 这里注意一下var myImage4 = new Image();myImage4.src = require("./youce.png");  //你自己本地的图片或者在线图片myImage4.crossOrigin = 'Anonymous';myImage4.onload = function(){context1.drawImage(myImage4 , 490 , 0 , 135 , 1205);var myImage5 = new Image();myImage5.src = require("./diban.png");  //你自己本地的图片或者在线图片myImage5.crossOrigin = 'Anonymous';myImage5.onload = function(){context1.drawImage(myImage5 , 0 , 954 , 630 , 255);var base64 = canvas1.toDataURL("image/png"); //"image/png" 这里注意一下//var img = document.getElementById('avatar');// document.getElementById('avatar').src = base64;//img.setAttribute('src' , base64);}}}}}}componentDidMount() {this.initCanvas()}componentDidUpdate() {this.initCanvas()}render() {const { width, height, canvaswidth, canvasheight } = this.propsreturn (<div style={{ display:"flex",flexDirection:"column" }}><div style={{ display:"flex",flexDirection:"row" }}><img style={{ width: 200, height: 83, padding: 10 }} src={require('./diaoding.png')}></img><img style={{ width: 100, height: 200, padding: 10 }} src={require('./zuoce.png')}></img><img style={{ width: 103, height: 200, padding: 10 }} src={require('./houbi1.png')}></img><img style={{ width: 100, height: 200, padding: 10 }} src={require('./youce.png')}></img><img style={{ width: 200, height: 84, padding: 10 }} src={require('./diban.png')}></img></div><canvas id="customCanvas" width={canvaswidth} height={canvasheight}></canvas>{/* <img id="avatar" ></img> */}</div>)}
}export default photoSynthesis;

个人博客：个人博客链接

react中使用canvas进行图片合成相关推荐

react前端显示图片_在react中怎么动态渲染图片？
在react中怎么动态渲染图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. React 动态渲染图片,提升用户体验市场上竞争是非常残酷的,众所周知, ...
干货 | React 中的 Canvas 动画
作者简介掺水的酱油,携程软件技术专家,关注大前端及移动端相关技术. 移动端硬件性能越来越好的今天,页面的交互也越来越丰富,Web 体验在不断向原生应用靠拢,加入了越来越多的手势与动画.除了常见的 C ...
html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
使用canvas在前端实现图片合成
看着总结的不错,我也就拿来主义了,做个记录,侵权必删图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的. 随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在 ...
h5 canvas html 合成,图片合成以及canvas的应用
使用 canvas 在前端实现图片合成基本API // 绘制图片常用 API const canvas = document.createElement('canvas'); const ctx = ...
.Net Core 图片合成、证书生成
.Net Core 图片合成.证书生成文章目录 .Net Core 图片合成.证书生成前言一.封装ImgText对象二.ImageUtil帮助类三.测试总结前言在开发中有一些场景中我们 ...
react中使用simditor富文本编辑器
react 中使用没有启用图片上传功能的simditor 富文本编辑器环境介绍功能需求步骤实现 npm安装simditor依赖 jsx页面引入 componentDidMount 获取DOM ...
canvas 实现图片局部模糊_JavaScript中的图片处理与合成(四)
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...

react中使用canvas进行图片合成

react中使用canvas进行图片合成相关推荐

最新文章

热门文章