canvas将新图像绘制到已有的图像上实现类似水印功能

骑猪看日落 2024-03-17 10:02 79阅读 0赞

canvas将新图像绘制到已有的图像上实现类似水印功能

  • 解释
  • 代码

在这里插入图片描述

解释

canvas标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,canvas元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

具体可看:https://www.runoob.com/tags/ref-canvas.html

代码

  1. <!-- 水印 -->
  2. <el-form-item label="水印开关" prop="watermarkFlag">
  3. <el-switch v-model="siteInfo.watermarkFlag" active-color="#3963bc" active-value="1"
  4. inactive-value="0" @change="switchChange"></el-switch>
  5. </el-form-item>
  6. <template v-if="siteInfo.watermarkFlag === '1'">
  7. <el-form-item label="上传水印" prop="ossRegionId">
  8. <UploadWater type="image" :drag="false" v-model:file-list="fileList"
  9. :waterOpcity="siteInfo.watermarkTransparent" :size="10" />
  10. </el-form-item>
  11. <template v-if="fileList.length > 0">
  12. <el-form-item label="水印位置" prop="watermarkPosition">
  13. <el-select size="medium" v-model="siteInfo.watermarkPosition" placeholder="水印位置"
  14. @change="waterPositionChange">
  15. <el-option value="0" label="平铺"></el-option>
  16. <el-option value="1" label="横向平铺"></el-option>
  17. <el-option value="2" label="竖向平铺"></el-option>
  18. <el-option value="3" label="单一位置"></el-option>
  19. </el-select>
  20. </el-form-item>
  21. <el-form-item label="单一位置" prop="watermarkSinglePosition" v-if="siteInfo.watermarkPosition === '3'">
  22. <el-select size="medium" v-model="siteInfo.watermarkSinglePosition" placeholder="单一位置" @change="waterPositionChange">
  23. <!-- /** 水印单一位置,1左下,3右下,7左上,9右上 */ -->
  24. <el-option value="7" label="左上角"></el-option>
  25. <el-option value="9" label="右上角"></el-option>
  26. <el-option value="1" label="左下角"></el-option>
  27. <el-option value="3" label="右下角"></el-option>
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="倾斜角度" prop="watermarkIncline"
  31. v-if="siteInfo.watermarkPosition === '1' || siteInfo.watermarkPosition === '2'">
  32. <el-slider style="width: 300px;" v-model="siteInfo.watermarkIncline" max="360" @change="waterPositionChange" />
  33. </el-form-item>
  34. <el-form-item label="预览图" v-if="siteInfo.watermarkPosition">
  35. <canvas id="waterCanvas" width="500" height="500" v-if="isShow"></canvas>
  36. <canvas id="waterCanvasTwo" width="500" height="500" v-else></canvas>
  37. </el-form-item>
  38. <el-form-item label="透明度" prop="watermarkTransparent" v-if="siteInfo.watermarkPosition">
  39. <el-input-number v-model="siteInfo.watermarkTransparent" :step="0.1" :min="0" :max="1" @change="waterPositionChange" />
  40. </el-form-item>
  41. </template>
  42. // 水印位置改变
  43. const isShow = ref(false)
  44. const waterPositionChange = (e) => {
  45. console.log(fileList.value);
  46. isShow.value = !isShow.value
  47. // 等dom节点挂载之后
  48. setTimeout(() => {
  49. // 创建一个画布
  50. if (isShow.value) {
  51. canvas = document.getElementById("waterCanvas");
  52. } else {
  53. console.log(isShow.value, 'waterCanvasTwo');
  54. canvas = document.getElementById("waterCanvasTwo");
  55. }
  56. setTimeout(() => {
  57. mergeImages()
  58. }, 200)
  59. }, 200)
  60. }
  61. // 水印设置
  62. var canvas;
  63. const mergeImages = (file) => {
  64. return new Promise((resolve) => {
  65. // 获取当前图片的宽和高
  66. let myWidth = 500
  67. let myHeight = 500
  68. const context = canvas.getContext("2d");
  69. context.clearRect(0,0,myWidth,myHeight) //初始化清除上一次的绘画
  70. // 绘制背景图
  71. const overlay = new Image();
  72. overlay.src = 'http://mohua.oss-cn-shenzhen.aliyuncs.com/16674632080942882401467732332544.jpeg'
  73. overlay.setAttribute("crossOrigin", 'Anonymous')
  74. overlay.onload = () => {
  75. context.drawImage(overlay, 0, 0, myWidth, myHeight); //绘制水印背景图
  76. // 样版图片
  77. const template = new Image();
  78. template.crossOrigin = "anonymous";
  79. template.src = fileList.value[0]?.url
  80. console.log(fileList.value[0]?.url, 'fileList.value[0]?.url');
  81. template.onload = () => {
  82. context.globalAlpha = siteInfo.watermarkTransparent; //水印透明度
  83. // 平铺
  84. if (siteInfo.watermarkPosition === '0') {
  85. context.fillStyle = context.createPattern(template, "repeat"); //水印平铺
  86. context.fillRect(0, 0, 800, 800); //填充画布
  87. } else if (siteInfo.watermarkPosition === '1') {
  88. // 角度
  89. if (siteInfo.watermarkIncline !== 0) {
  90. context.rotate(siteInfo.watermarkIncline*Math.PI/180);
  91. }
  92. context.fillStyle = context.createPattern(template, "repeat-x"); //水印横向平铺
  93. context.fillRect(0, 0, myWidth, myHeight); //填充画布
  94. } else if (siteInfo.watermarkPosition === '2') {
  95. // 角度
  96. if (siteInfo.watermarkIncline !== 0) {
  97. context.rotate(-siteInfo.watermarkIncline*Math.PI/180);
  98. }
  99. context.fillStyle = context.createPattern(template, "repeat-y"); //水印竖向平铺
  100. context.fillRect(0, 0, myWidth, myHeight); //填充画布
  101. } else {
  102. // 单一位置
  103. if (siteInfo.watermarkSinglePosition === '7') {
  104. context.drawImage(template, 0, 0, 50, 50); //绘制水印位于左上角
  105. }
  106. if (siteInfo.watermarkSinglePosition === '9') {
  107. context.drawImage(template, 450, 0, 50, 50); //绘制水印位于右上角
  108. }
  109. if (siteInfo.watermarkSinglePosition === '1') {
  110. context.drawImage(template, 0, 450, 50, 50); //绘制水印位于左下角
  111. }
  112. if (siteInfo.watermarkSinglePosition === '3') {
  113. context.drawImage(template, 450, 450, 50, 50); //绘制水印位于右下角
  114. }
  115. }
  116. let data = canvas.toDataURL('image/jpeg')
  117. // console.log(data, 'data');
  118. };
  119. };
  120. })
  121. }

发表评论

表情:
评论列表 (有 0 条评论,79人围观)

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

相关阅读

    相关 canvas详解03-绘制图像和视频

    canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如