tnblog
首页
视频
资源
登录

vue3 使用Canvas对图像进行编辑,图片里边添加文字,导出为图片,导出图片的时候按照一定比例进行导出

404人阅读 2024/12/16 17:00 总访问:803520 评论:0 收藏:0 手机
分类: 前端


比如我想把原图为35082480的缩小三倍变成1169827下编辑,这个时候我把Canvas的宽高设置成1169827编辑后,后导出为图片的时候让图片可以变成原来背景图片所拥有的35082480。
因为有些时候原图太大了,所以按图片大小来编辑不太方便,先缩小后编辑在放大导出。

示例代码如下:

  1. <template>
  2. <div>
  3. <canvas ref="canvasRef" :width="canvasWidth" :height="canvasHeight"></canvas>
  4. <button @click="exportCanvasAsImage">Export as Image</button>
  5. </div>
  6. </template>
  7. <script setup lang="ts">
  8. import { ref, onMounted } from 'vue';
  9. // 原始图片大小
  10. const originalWidth = 3508;
  11. const originalHeight = 2480;
  12. // Canvas大小(缩小三倍)
  13. const scale = 3;
  14. const canvasWidth = originalWidth / scale;
  15. const canvasHeight = originalHeight / scale;
  16. // 引用Canvas元素
  17. const canvasRef = ref<HTMLCanvasElement | null>(null);
  18. let ctx!: CanvasRenderingContext2D;
  19. let originalImage!: HTMLImageElement;
  20. // 加载原始图片
  21. const loadImage = () => {
  22. originalImage = new Image();
  23. originalImage.src = 'path/to/your/original/image.jpg'; // 替换为你的图片路径
  24. originalImage.onload = () => {
  25. // 图片加载完成后进行编辑
  26. editCanvas();
  27. };
  28. };
  29. // 组件挂载时初始化
  30. onMounted(() => {
  31. loadImage();
  32. });
  33. // 编辑Canvas内容的函数
  34. const editCanvas = () => {
  35. if (canvasRef.value && originalImage.complete) {
  36. ctx = canvasRef.value.getContext('2d')!;
  37. // 绘制缩小后的原始图片
  38. ctx.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);
  39. // 在Canvas上添加文字或图片信息(示例:添加文字)
  40. ctx.font = '24px Arial';
  41. ctx.fillStyle = 'red';
  42. ctx.fillText('Hello, edited image!', 50, 50);
  43. // 你可以在这里添加更多的编辑操作...
  44. }
  45. };
  46. // 导出Canvas内容为图片的函数
  47. const exportCanvasAsImage = () => {
  48. if (canvasRef.value) {
  49. // 创建一个新的Canvas元素,用于导出图像(原始大小)
  50. const exportCanvas = document.createElement('canvas');
  51. exportCanvas.width = originalWidth;
  52. exportCanvas.height = originalHeight;
  53. const exportCtx = exportCanvas.getContext('2d')!;
  54. // 将编辑后的Canvas内容按比例缩放回原始大小
  55. exportCtx.drawImage(
  56. canvasRef.value,
  57. 0, 0, canvasWidth, canvasHeight, // 源Canvas的坐标和尺寸
  58. 0, 0, originalWidth, originalHeight // 目标Canvas的坐标和尺寸
  59. );
  60. // 导出为图片
  61. exportCanvas.toBlob(blob => {
  62. const url = URL.createObjectURL(blob!);
  63. const a = document.createElement('a');
  64. a.href = url;
  65. a.download = 'edited-image.png';
  66. a.click();
  67. URL.revokeObjectURL(url); // 释放URL对象
  68. }, 'image/png');
  69. }
  70. };
  71. </script>
  72. <style scoped>
  73. /* 你可以在这里添加样式 */
  74. </style>

如果只按照编辑大小的cans导出,这样写即可

  1. // 只按照编辑大小的cans导出
  2. const exportCanvasAsImage = () => {
  3. if (canvasRef.value) {
  4. // 导出为图片
  5. canvasRef.value.toBlob((blob) => {
  6. const url = URL.createObjectURL(blob!)
  7. const a = document.createElement('a')
  8. a.href = url
  9. a.download = 'exported-image.png'
  10. a.click()
  11. URL.revokeObjectURL(url) // 释放URL对象
  12. }, 'image/png')
  13. }
  14. }

在这个示例中,我们:

  1. 定义了原始图片的宽度和高度(originalWidthoriginalHeight)。
  2. 计算了缩小比例后的Canvas宽度和高度(canvasWidthcanvasHeight)。
  3. onMounted钩子中加载了原始图片,并在图片加载完成后调用editCanvas函数。
  4. editCanvas函数中,我们将缩小后的原始图片绘制到Canvas上,并添加了文字或其他信息。
  5. exportCanvasAsImage函数中,我们创建了一个新的Canvas元素,其尺寸与原始图片相同,并使用drawImage方法将编辑后的Canvas内容按比例缩放回原始大小,然后导出为图片。

注意,实际使用的时候你需要将originalImage.src替换为你的原始图片的实际路径。此外,由于图片加载是异步的,因此在图片加载完成之前,Canvas上不会显示任何内容。这就是为什么我们在originalImage.onload事件处理程序中调用editCanvas函数的原因。


这个方案是可以在导出的时候变成原有的分辨率,但是这个方案应该就是类似于把图片放大了,但是图片会失真哇,背景还是没有原始状态下的分辨率清晰。


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue3vue组件props给一个对象参数。vue组件间传参数vue父组件给子组件传参数。组件参数类型。父组件调用子组件的方法。vue组件事件监听给子组件传递方法子组件调用父组件方法

[TOC]组件可以使用props给组件传值,可以同时传递多个,可以是任意类型,比如字符串或者对象。 下面是个简单的例子: &lt...

vue3最基础的数据加载表格table

vue3表格加载一点静态数据 &lt;template&gt; &lt;el-table :data=&quot;tableData&quot; style=&quot;width: 100%&quot...

vue3 Element Plus 表单输入框放到一行

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域...

vue3 Element ui Plus 表格 分页vue3 el-pagination分页

其实就是el-pagination控件的使用而已 &lt;template&gt; &lt;div&gt; &lt;el-table :data=&quot;tableData&quot; ...

vue触发a标签的点击事件。vue3 dom操作 触发点击事件 。文件选择库只会触发一次change事件的问题

[TOC]vue触发a标签的点击事件直接操作dom节点的方式比较简单 &lt;button @click=&quot;handleBtnClick&quot;&gt;点击按钮&...

vue3 ref的使用多个ref的使用。通过ref触发点击事件

多个ref获取的方法可以使用一样的,通过变量名来区分就行了 const vabUploadRef = ref() const multipleTableRef = ref() ...

vue elementuivue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传

比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单,el-upload绑定一个data即可...

vuevue3 打开新页面页面跳转。vue跳转到一个新页面。vue路由传参vue3路由传参vue3 获取路由参数

[TOC]VUE页面跳转本地页面跳转 goApplicationCenter() { //进行页面跳转 let path = &quot;/application-center&quo...

vuevue3组件封装vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果一块一块的grid布局效果

[TOC]vue封装组件的简单模板贴一个简单模板方便自定义组件的时候直接复制 &lt;template&gt; &lt;div class=&quot;app...

.net6 Signalr+vue3 的运用(上)

.net6 Signalr+Vue3 的运用(上)[TOC] 什么是 SignalR?ASP.NET Core SignalR 是一个开放源代码库,可用于简化向应用添加...

.net6 Signalr+vue3 的运用(下)

.net6 Signalr+Vue3 的运用(下)[TOC] 上篇链接:https://www.tnblog.net/hb/article/details/7961SignalR 中的用户 Sig...

.net6 Signalr+vue3 配合Ingress Nginx的运用

.net6 Signalr+Vue3 配合Ingress Nginx的运用[TOC] 结合上篇:https://www.tnblog.net/hb/article/details/7963 项目打...

vue3 Element Plus 表格使用vue3常用界面搭配。vue3基础模板使用

一个简单的表格加时间搜索界面效果如下: 代码如下: &lt;template&gt; &lt;div class=&quot;app-container&quot;&g...

vue3 如何加prototype。vue3使用globalProperties

在2.X版本中创建一个vue 实例是通过 new Vue()来实现的,到了3.X中则是通过使用createApp这个 API返回一个应用实例,并且可...
这一生多幸运赶上过你.
排名
8
文章
207
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术