腾讯云备案网站建设方案书,两个wordpress共用一个数据库,国内永久免费crm系统小说,保定市最新消息今天目录
功能描述
图片的格式
复制图片和文字
第一种#xff0c;直接复制#xff08;不推荐#xff09;
第二种#xff0c;画图后复制
下载图片和文字
总结 功能描述
可以简单描述成复制图片和文字#xff0c;下载图片和文字
前者还好说#xff0c;比如在图片右键点…目录
功能描述
图片的格式
复制图片和文字
第一种直接复制不推荐
第二种画图后复制
下载图片和文字
总结 功能描述
可以简单描述成复制图片和文字下载图片和文字
前者还好说比如在图片右键点击就有浏览器中的复制图片的功能如下 所以实现方法应该挺多而后者如果想要一张图片和文字说明都被下载那肯定是在一起下载成一张图片的样子所以后者的实现方法我暂时只想到一种画canvas然后下载。
前者的实现我有两种各有优缺点。
说一下我需要实现的样子如上面的动图我是开发了一个弹窗在弹窗里写了一个图片和一些文字然后底部有一个复制和下载按钮。
PS之前考虑使用富文本因为富文本可以直接粘贴图片和文字到微信输入框和文档可是一个简单的功能不考虑引入富文本了比较麻烦。
另外关于复制和粘贴图片和文字首先要知道一点在微信聊天框和文档等富文本环境里直接粘贴图像的支持取决于这些平台的实现。通常情况下直接从剪贴板中复制图像并粘贴到富文本环境中并不能让图像显示。微信聊天框和文档通常期望用户通过上传图片的方式来插入图片而不是直接从剪贴板中粘贴。这样可以更好地控制图像的来源和确保安全性。
图片的格式 可以是任何有效的图片 URL包括基于网络的 URL、base64 编码的数据 URI 或其他支持的格式。只要 img.src 可以成功加载图片即可。我用的是el-image 以下是一些示例 网络图片 URL onst imageUrl https://example.com/path/to/image.jpg; Base64 编码的图片 const imageUrl data:image/png;base64,iVBORw...; // 替换为实际的 base64 编码 其他格式的图片 URL const imageUrl data:image/svgxml,svg xmlnshttp://www.w3.org/2000/svg width100 height100rect width100% height100% fillred //svg; 无论使用哪种格式只要能够被 Image 对象成功加载就可以用于在 canvas 中绘制。在实际使用中确保 Url 是有效的不会导致跨域问题如果是网络图片并且可以被浏览器加载。 复制图片和文字 图片和文字一般是图片和文字说明如果只是复制那么一般需要能够在文档微信聊天的输入框等地方能够粘贴实现这种就可以了那也就是要么将这个带图片和文字的DOM复制下来要么也就是跟下载一样画一个canvas 然后复制。二选一详细描述在下面。 所以有几个能复制的API就不太使用比如浏览器的 Clipboard 提供了它 ClipboardItem但并不是所有浏览器都支持将图像粘贴到富文本编辑器中。
第一种直接复制不推荐
第一种方式是先把图片和文字的DOM给一个ref然后就复制这个dom调用这document.execCommand就能实现代码如下 div classimage-container styleflex-direction: column; refimageDomel-imagestylewidth: 200px; height: 200px:srcurlfitfill/el-image span classtext{{ida}}/span/div
this.$nextTick(() {//nextTick,当前dom渲染完毕的回调//打印获取的domconsole.log(imageDom, this.$refs.imageDom) const selection window.getSelection()const range document.createRange()//传入domrange.selectNode(this.$refs.imageDom) selection.addRange(range)document.execCommand(copy) //document.execCommand 已经被废弃// 清除缓存selection.removeAllRanges()this.$Message.success(复制成功!);})
实现效果如下点击复制后到一个文档点击粘贴内容如下
白色的背景估计是dom的背景色也粘贴下来了并且我在Dom里设置图片大小是200px高宽这个粘贴的是原始大小我是缩小了后才能看到这样子的。
但是这种方法虽然可以在文档里粘贴但是微信输入框不可以只能粘贴文字 所以我不推荐的原因有两个
1.不能在聊天输入框里粘贴的话那么这个复制功能应用场景就比较局限
2.不能保留DOM的样式比如无法粘贴文本的字体大小颜色之类的有些富文本的可以。 第二种画图后复制
用Canvas画出图像和文本然后通过 Clipboard API 复制到剪贴板。这种方式可以确保在粘贴时能够包含图像和文本。这个需要注意一下浏览器兼容性 Canvas、Blob 和 Clipboard API 的使用在大多数现代浏览器中是支持的但在一些较老的浏览器中可能存在问题。建议在目标浏览器上进行测试确保功能正常。
不过在移动端设备上可能需要特别小心兼容性问题。如果在某些浏览器或环境中发现问题可以考虑降级到一种更普遍支持的方案如直接下载图片和文本的合并文件然后手动上传正好下下面也考虑开发下载功能。 this.$nextTick(() {// 获取图片和文本const imageUrl https://file.iviewui.com/images/image-demo-13.jpg; // 替换为实际的图片URLconst text 123456;// 创建一个 canvas 元素const canvas document.createElement(canvas);const ctx canvas.getContext(2d);// 创建一个 Image 元素用于加载图片const img new Image();img.crossOrigin Anonymous; // 处理跨域图片img.src imageUrl;img.onload () {// 设置 canvas 的尺寸const canvasWidth img.width;const canvasHeight img.height 50; // 考虑到文字的高度增加 50px 的高度canvas.width canvasWidth;canvas.height canvasHeight;// 绘制白色背景ctx.fillStyle #ffffff;ctx.fillRect(0, 0, canvasWidth, canvasHeight);// 绘制图片ctx.drawImage(img, 0, 0, canvasWidth, img.height);// 绘制文本ctx.font bold 14px Arial;ctx.fillStyle #000;ctx.textAlign center; // 文本水平居中ctx.textBaseline top;// 设置文本距离图片底部的边距const textMargin 10;const textX canvasWidth / 2; // 文本横向居中const textY img.height textMargin;ctx.fillText(text, textX, textY);// 复制 canvas 内容到剪贴板canvas.toBlob((blob) {const clipboardItem new ClipboardItem({ image/png: blob });navigator.clipboard.write([clipboardItem]).then(() {console.log(Canvas content copied to clipboard);});});};});
这里画图时我是给图片设置了一个宽度200px画布高250px所以复制下的图片就100KB原图可能几MB也可以不压缩直接在原图的高宽上加一个文字的高度就行但是这种画出来的图不协调。
上面是复制的时候去画图当然也可以选择打开弹窗时就显示一张画好的图然后点击复制直接复制。其实就是上面的代码拆开然后加了一个canvas的dom可以不看。
canvas refcanvas/canvas
// 打开弹窗时this.$nextTick(() {const canvas this.$refs.canvas;this.drawCanvas(canvas);});
// 画图
drawCanvas(canvas) {const ctx canvas.getContext(2d);const img new Image();img.crossOrigin Anonymous;img.src this.url;img.onload () {const canvasWidth 400;const canvasHeight 400 50;canvas.width canvasWidth;canvas.height canvasHeight;ctx.fillStyle #ffffff;ctx.fillRect(0, 0, canvasWidth, canvasHeight);ctx.drawImage(img, 0, 0, canvasWidth, 400);ctx.font bold 14px Arial;ctx.fillStyle #000;ctx.textAlign center;ctx.textBaseline top;const textMargin 10;const textX canvasWidth / 2;const textY 400 textMargin;ctx.fillText(this.ida, textX, textY);};},// 复制
// 在点击复制时将 Canvas 的内容复制到剪贴板const canvas this.$refs.canvas;canvas.toBlob((blob) {const clipboardItem new ClipboardItem({ image/png: blob });navigator.clipboard.write([clipboardItem]).then(() {console.log(Canvas content copied to clipboard);});}); 实现效果如下 我是先粘贴到微信聊天框然后粘贴到文档里粘贴后的图片大小压缩了一部分如果只是看图片的话这种还可以看压缩的不太过分。
下载图片和文字
下载是将canvas 复制然后通过a标签创建链接在新标签页下载的手段比较常见。
// 复制 canvas 内容const canvas this.$refs.canvas;canvas.toBlob((blob) {const clipboardItem new ClipboardItem({ image/png: blob });navigator.clipboard.write([clipboardItem]).then(() {this.$Message.info(下载中...)});});// 创建下载链接const link document.createElement(a);link.href canvas.toDataURL(image/png);link.download canvas_image.png;// 将链接添加到页面document.body.appendChild(link);// 触发链接点击事件const clickEvent new MouseEvent(click, {bubbles: true,cancelable: false,view: window});link.dispatchEvent(clickEvent);// 移除链接document.body.removeChild(link); 总结 暂时只想到这两种办法然后基本都是通过HTML5的Clipboard 来实现复制。 核心代码 canvas.toBlob((blob) {const clipboardItem new ClipboardItem({ image/png: blob });navigator.clipboard.write([clipboardItem]).then(() {this.$Message.info(下载中...)});}); Canvas API canvas.toBlob 方法用于将 Canvas 上的内容转换成一个 Blob 对象。在你的代码中blob 就是包含 Canvas 内容的 Blob 对象。Blob 是二进制大对象Binary Large Object的缩写它是一个表示任意类型数据的不可变、原始数据的类文件对象。在这里blob 包含了 Canvas 上绘制的图像和文本。 canvas.toBlob((blob) { // 在这里blob 包含了 Canvas 上绘制的图像和文本 }); Clipboard API ClipboardItem 是 Clipboard API 中的一个对象它表示要复制到剪贴板的数据项。在这里创建了一个包含图像的 ClipboardItem 对象并指定了 MIME 类型为 image/png。然后通过 navigator.clipboard.write 方法将 ClipboardItem 对象写入剪贴板。 const clipboardItem new ClipboardItem({ image/png: blob }); navigator.clipboard.write([clipboardItem]).then(() { // 复制到剪贴板成功后的回调 }); 在这个过程中浏览器会向用户请求权限来访问剪贴板因此需要在用户同意后执行复制操作。 总体而言这段代码的目的是在 Canvas 中绘制图像和文本将绘制的内容转换成 Blob 对象然后通过 Clipboard API 将 Blob 对象复制到剪贴板中。在这个过程中用户可能会看到有关剪贴板操作的浏览器提示。OVER。
