html5 在线编辑图片大小,html5画布编辑图片问题

痛定思痛。 2022-10-06 00:32 236阅读 0赞

实现思路：base64Image -> 导入canvas -> 添加水印 -> 生成base64Image

Document

canvas

image

![e57a4c6b4b8f76a5efcc13edc3438a3a.png][]

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

canvas.width = 256;

canvas.height = 256;

var image = new Image();

// 引用外部图片，需设置 crossOrigin 属性，否则 toDataURL 调用异常

image.setAttribute('crossOrigin', 'anonymous');

image.onload = function ()\{

context.drawImage(image, 0, 0);

context.font = '16px Arial';

context.fillStyle = '\#fff';

context.fillText('水印文本 - 火影忍者', 105, 245);

context.beginPath();

context.lineWidth = 10;

context.strokeStyle = '\#ff5900';

context.moveTo(0, 0);

context.lineTo(256, 0);

context.lineTo(256, 256);

context.lineTo(0, 256);

context.lineTo(0, 0);

context.stroke();

// 最终生成的图片 base64 字符串

var base64Image = canvas.toDataURL();

document.getElementById('xxx').src = base64Image;

// console.log(base64Image);

\};

// 将 src 换成 base64 字符串

image.src = 'http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb';

[e57a4c6b4b8f76a5efcc13edc3438a3a.png]: /images/20221005/fed2dcfd99e3462ca7be0553d4d21f07.png

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关在线编辑Word——插入图片、图形

在Word中支持插入图片、图形等元素，同时支持对插入的图片和图形进行格式化操作，如裁剪、调整尺寸大小、调成颜色、阴影、倾斜角度、透明度等等。本文，将通过使用Spire.Clou

超、凢脫俗/ 2023年10月11日 16:52/ 0 赞/ 40 阅读

相关 HTML5 canvas 画布

画布 canvas 与 svg canvas 能够做什么？创建一块小画布（canvas）创建画笔（getC

秒速五厘米/ 2023年06月22日 05:19/ 0 赞/ 15 阅读

相关 CKEditor 5 在线编辑 PDF

[CKEditor 5 ][CKEditor 5] 新版本进一步增强了表格功能、改进了小部件周围的键入，以及引入了新的 PDF 导出功能 CKEditor表的改进 CK

左手的ㄟ右手/ 2023年02月16日 04:03/ 0 赞/ 37 阅读

相关图片编辑不显示图片_四个在线图片编辑工具送给大家

今天135编辑器给大家带来一波在线图片编辑工具的福利，大家在平时生活、工作、学习多多少少都有编辑过图片，最常见的就是在网上聊天的斗图，很多人很惊讶为什么某某总是有很多新的表情包

Dear 丶/ 2023年01月07日 05:59/ 0 赞/ 136 阅读

相关 HTML5 Canvas图片模糊问题

关于canvas图片模糊问题最好的办法就使用Window.devicePixelRatio 1. Window 接口的devicePixelRatio返回当前显示设备的物理

小鱼儿/ 2022年10月16日 09:39/ 0 赞/ 224 阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 311 阅读

相关 html5 在线编辑图片大小,html5画布编辑图片问题

实现思路：base64Image -> 导入canvas -> 添加水印 -> 生成base64Image Document canvas image ![e57a4c

痛定思痛。/ 2022年10月06日 00:32/ 0 赞/ 237 阅读

相关【HTML5】响应式图片

　　jq width() 、height()获取的是图片加载到页面上的图片显示尺寸（图片标签width、height属性值或max-width后的值）而非图片真实尺寸；所以虽然

谁借莪１个温暖的怀抱￠/ 2022年06月05日 08:55/ 0 赞/ 276 阅读

相关 HTML5 响应式图片

响应式图片的核心目的只写一遍代码，就能适用所有设备。（img 标签等价于 image 标签） 1、通过 srcset 切换分辨率（1）通过分辨率切换

末蓝、/ 2022年05月27日 01:52/ 0 赞/ 236 阅读

相关 Html5怎么导出图片

其实很简单，首先需要两个js文件　　[jquery.min.js][] 　　[html2canvas.js][] 　　直接上代码，几行就解决了 <a i

Bertha 。/ 2021年12月22日 08:21/ 0 赞/ 288 阅读