canvas 图片合成或文字合成 并导出base64格式

最新推荐文章于 2024-04-28 11:42:27 发布
最新推荐文章于 2024-04-28 11:42:27 发布
阅读量1.3k 收藏 2
点赞数 2
文章标签： canvas image

canvas操作图片或文字叠加并导出base64

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no" />
  <!-- new end -->
  <style>
  </style>
</head>

<body>
  <div class="mui-content">
    <button onclick="mmm('wrap-img','inner-img')" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
    <img id="inner-img" src="/img/2.jpg" />
    <!-- 
        这里要注意 同源策略
        可以用自己服务器上的图片
        如果遇到问题 请去Stack Overflow解决相关问题
     -->
    <img id="wrap-img" src="/img/1.jpg" />
    <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
    </canvas>
    <img src="" alt="" id='new-img'>
  </div>
  <script src='https://benjazhu-1.oss-cn-shenzhen.aliyuncs.com/assets/js/jquery2.1.5.min.js'></script>
  <script> </script>
  <script>
  function mmm(wrap_img_id, inner_img_id) {
    console.log("mmm");
    //两张图
    var img = document.getElementById(wrap_img_id);
    var canvas = document.getElementById("myCanvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);


    var img2 = document.getElementById(inner_img_id);

    var scale = 5

    ctx.drawImage(img2, 0, 0, img2.width, img2.height, img.width - img2.width / scale, 0, img2.width / scale, img2.height / scale);



    ctx.font = "20px Georgia";
    ctx.fillText("Hello World!", 10, 50);

    ctx.font = "30px Verdana";

    srccc = canvas.toDataURL("image/jpeg", 0.8);
    console.log(srccc);
    $('#new-img').attr('src', srccc);
  }
  </script>
</body>

</html>

测试地址 ：

canvas 合成图片

本文首发于 我的博客

github_36494192
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用canvas将图片+文字转成base64格式的图片
onemango的博客
06-20 1331
var url = "car.png" //图片的路径 var img = new Image(); img.src = url; img.onload = function() { console.log(getBase64(img,'AAAA')); console.log(getBase64(img,'BBBB')) } function getBase64(img,t...
Canvas画布图片文字拼接合成，生成图片
11-19
Canvas画布图片文字拼接合成，生成图片，输入内容，填写到图片上
使用canvas标签，将图片与文案合并方案存在的情况
最新发布
weixin_69890748的博客
04-28 529
其实，以上如果由前端处理，那方案本身就存在些问题的，一是图片是动态返回的，不是写死的资源，二是就算将图片转base64后合并导出图片，那也得考虑性能问题，图片资源大的情况也不可行。当canvas的内容来自不同的源（即不同的域名、端口或协议）时，浏览器会出于安全考虑限制对其内容的访问。前端拿到两个字段后，要实现拼接姓名在二维码图片正下方，合并成新的图片，并点击保存下来，如下图：。以上代码看完后，合并展示效果是没有问题的，但是最终你在点击保存时，会报错无法保存，是因为。拼接姓名再返回新的url返回给前端保存。
前端将两张图片和文字叠加并生成base64位的图片，并附上完整DOM
PLB1314的博客
03-11 799
在这里插入代码片
canvas实现图片文字合成
一键写代码的博客
08-08 1518
https://www.cnblogs.com/mybilibili/p/10438869.html https://www.zhangxinxu.com/wordpress/2017/05/canvas-picture-watermark-synthesis/ https://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-comp...
canvas 图片处理（缩放、旋转、裁剪、合并、文字）
热门推荐
qq_38702697的博客
11-03 3万+
canvas 图片处理（缩放、旋转、裁剪、合并、文字）图片旋转以图片中心作旋转示例未完待续。。。。。。 图片旋转 tupian图片旋转主要调用的是canvas的rotate()方法 rotate()旋转当前的绘图。 语法：context.rotate(angle) 参数：angle旋转角度，以弧度计（n*Math.PI） 举例：假如想要旋转60度，可以context.rotate(Math.PI/...
canvas 合成 文字 图片
12-28
HTML5提供了`toDataURL()`方法，可以将Canvas内容转换为一个Data URL，实质是一个包含Base64编码的图片数据： ```javascript const dataURL = canvas.toDataURL(); ``` 这个Data URL可以直接用于`<img>`标签的`src...
使用canvas对多图片拼合并导出图片的方法
09-22
例如，我们可以将logo图片转换为base64格式： ```javascript function imgToBase64(url, callback) { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); ...
实现canvas 图片拖拽旋转移动 点击转成base64
04-14
使用hammer.js监听触控时产生...点击按钮获取画布内的base64，并显示. 测试时请放在tomcat内，并手机访问. 不足：canvas加载图片缩放时有失真（前一个上传的demo则不失真） 优点:可双点触控 同时进行移动缩放旋转效果
html5 canvas合成海报所遇问题及解决方案总结
09-27
跨域图片在Canvas上绘制后，不能直接导出为Base64格式。这涉及浏览器的安全策略。解决方法是服务器端设置图片允许跨域（CORS），并在前端设置图片的`crossOrigin`属性为`"Anonymous"`。 ```javascript var ...
jquery生成带logo的二维码(js与canvas海报合成).rar
11-20
本项目重点在于使用jQuery来生成带Logo的二维码，并结合canvas技术实现二维码与图片的合成，生成可以用于好友分享的个性化海报。 首先，`jquery.qrcode`是一个jQuery插件，它允许我们在网页上动态生成二维码。这个...
canvas两张图片合成
03-14
通过canvas合成两张图片，并且动态的添加文字信息，希望大家能够得到很好的借鉴，我的博客上面还有类似的文章，兼容移动端和PC的都有，本人确实操作过，暂没有发现bug，伸手可以去我的博客上直接查看，这个是个合成的小demo，那个背景图片是瞎找的，是打算做类似的效果，换个纯色的图片观看比较明显
canvas生成图片 将输入框的文字生成一张图片 生成祝福和签名 并保存到本地相册图库
06-07
需求：移动端输入祝福内容和签名之后，点击生成图片的按钮，生成一张带有制定背景图片的明信片，明信片上带有输入框内容和签名。并自动保存。 关键字：canvas图文合成 图片生成 前端生成图片
利用 canvas 实现背景图片和其他图片以及文字的组合生成新图片
跟着飞哥学编程（全栈联盟）
06-09 1848
注：以下图片中，二维码部分是我动态生成的，以及姓名和工号位置的参数需要动态替换。利用 canvas 实现在面板上画图以及绘制文字等等。ps：先说一下我是如何在前端通过 js 生成二维码图片。如有问题，可私信咨询我或者加我文末推广微信。这一步如果您没有这个需求可以忽略。页面引入生成二维码的。
H5网页Canvas画布绘图 图片文字合成
季小沫的博客
11-24 1万+
一个很简单的小列子，直接贴代码，代码中都有注释，下面有demo链接。<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <script src="js/jque
使用Canvas合成多张图片和文字为一张图片
一键写代码的博客
08-08 3020
完整demo代码，vue <!-- 图片合成demo --> <template> <div class="view-wrap"> <h3>我是canvas图片文字合成组件</h3> <img ref="img1" src="./1.jpg" alt /> <img ref="img2" sr...
使用puppeteer或nodejs将图片和文字合并为一张图片
qq_38932871的博客
08-13 1361
（一）有时我们需要将图片和文字组合在一起，作为一张新的图片，需要用到js+canvas （二）实际案例：使用第三方软件解析图片验证码时，需要将图片发送给第三方，但是个别复杂的验证码会有这种形式：验证码旁边有一行文字，“请选择图片中蓝色的文字”，我们需要将验证码和文字一起发送过去。 （三）puppeteer需要通过page来获取document对象，js直接复制方法里面的逻辑即可 /** *合并文字和图片成为一张图片 *@param page puppeteer返回的page对象 *@param yz
canvas图片文字自动合成---微信朋友圈图片分享
Stavin Li的博客
10-26 1880
canvas-Synthetic-picture canvas图片合成，支持右键[另存为] 一、合成内容 1.图片 背景图 专属二维码 用户头像（圆形） 2.用户名 二、项目地址 https://github.com/StavinLi/canvas-Synthetic-picture 三、效果预览 https://stavinli.github.io/canvas-Synthetic-p...
canvas合成文本与图片
Revival_Liang的博客
10-27 1657
1，原生合成 Html5 Canvas 实现图片合成 | img{ border:solid 1px #ddd;} function hecheng(){ draw(function(){ document.getElementById('imgBox').innerHTML='合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！'; }) } va
canvas toDataURL转base64实现多张图片合成一个图片
06-07
可以使用canvas来实现多张图片合成一个图片，并将其转换为base64格式的数据。具体步骤如下： 1. 创建一个canvas元素，并设置其宽高为需要生成的合成图片的宽高。 2. 创建一个Image对象，用于加载需要合成的图片。可以使用多个Image对象来加载多张图片。 3. 在Image对象加载完成后，将其绘制到canvas中，可以使用canvas的drawImage方法。 4. 将canvas转换为base64格式的数据，可以使用canvas的toDataURL方法。需要注意的是，toDataURL方法的第一个参数可以指定图片的格式，默认为png格式。 以下是一个简单的示例代码： ```javascript // 创建canvas元素 var canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600; // 获取canvas的2D上下文 var ctx = canvas.getContext('2d'); // 创建Image对象 var img1 = new Image(); img1.src = 'image1.jpg'; img1.onload = function() { // 绘制第一张图片 ctx.drawImage(img1, 0, 0); // 创建第二张图片 var img2 = new Image(); img2.src = 'image2.jpg'; img2.onload = function() { // 绘制第二张图片 ctx.drawImage(img2, 400, 0); // 将canvas转换为base64格式的数据 var base64Data = canvas.toDataURL(); console.log(base64Data); }; }; ``` 在上面的代码中，我们创建了一个800x600的canvas元素，并使用两张图片分别在左侧和右侧绘制了出来。最后，我们将canvas转换为base64格式的数据，并输出到控制台中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值