图片合成:

信息 叠加的文本内容可生成图片并下载 功能

Author: baimingxuan

src/components/ElementDrr/index.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import VueDrr from 'vue-drr'
+import VueDrr from '../../components/VueDrr'
 
 export default {
   name: 'ElementDrr',
@@ -39,7 +39,6 @@ export default {
     element: {
       handler (val) {
         this.$nextTick(() => {
-          console.log(val)
           this.updateHeight()
         })
       },

src/components/ImageRichText/index.vue

@@ -64,9 +64,7 @@ export default {
     },
     // 光标聚焦
     handleFocus () {
-      this.$nextTick(() => {
-        this.activeEleText.active = true
-      })
+      this.activeEleText.active = true
     }
   }
 }
@@ -75,7 +73,8 @@ export default {
 <style lang="less">
 .image-rich-text {
   min-height: 18px;
-  padding: 6px 8px;
+  padding: 6px 8px!important;
+  outline: none;
   word-break: break-all;
 }
 </style>

src/components/TextSetting/index.vue

@@ -61,13 +61,14 @@
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="createImage">文本生成图片</el-button>
+        <el-button type="primary" @click="downloadImage">文本生成图片</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import { base64toBlob } from '../../utils'
 import ImageRichText from '../ImageRichText'
 
 const fontFamilyData = [
@@ -151,7 +152,67 @@ export default {
       }
     },
     // 文本生成图片
-    createImage () {}
+    textBecomeImg (obj) {
+      let canvas = document.createElement('canvas')
+      canvas.width = obj.w
+      canvas.height = obj.h
+      let context = canvas.getContext('2d')
+      // 绘制字体距离canvas顶部初始的高度
+      let initTop = 4
+      let initLeft = 8
+      // 设置背景色
+      context.fillStyle = obj.style.backgroundColor || 'transparent'
+      context.fillRect(0, 0, canvas.width, canvas.height)
+      // 设置文本样式
+      context.fillStyle = obj.style.color
+      context.font = obj.style.fontWeight + ' ' + obj.style.fontSize + ' ' + obj.style.fontFamily
+      context.textBaseline = 'top'
+      // 设置文本对齐方式
+      context.textAlign = obj.style.textAlign
+
+      let textArr = obj.text.split('')
+      let tempStr = ''
+      let rowArr = []
+      let maxTextWidth = canvas.width - 2 * initLeft
+
+      for (let i = 0; i < textArr.length; i++) {
+        if (context.measureText(tempStr).width < maxTextWidth && context.measureText(tempStr + (textArr[i])).width <= maxTextWidth) {
+          tempStr += textArr[i]
+        } else {
+          rowArr.push(tempStr)
+          tempStr = textArr[i]
+        }
+      }
+      rowArr.push(tempStr)
+
+      let drawLeft
+      if (context.textAlign === 'left') {
+        drawLeft = initLeft
+      } else if (context.textAlign === 'center') {
+        drawLeft = maxTextWidth / 2
+      } else if (context.textAlign === 'right') {
+        drawLeft = maxTextWidth
+      }
+
+      for (let i = 0; i < rowArr.length; i++) {
+        context.fillText(rowArr[i], drawLeft, (parseInt(obj.style.fontSize) * i + initTop), maxTextWidth)
+      }
+
+      return canvas.toDataURL('image/png')
+    },
+    // 下载生成的图片
+    downloadImage () {
+      const imageBase64 = this.textBecomeImg(this.activeEleText)
+      const imageBlob = base64toBlob(imageBase64)
+      const link = document.createElement('a')
+      const event = document.createEvent('HTMLEvents')
+      // initEvent 不加后两个参数会在火狐下报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
+      event.initEvent('click', true, true)
+      link.download = 'image.png'
+      link.href = URL.createObjectURL(imageBlob)
+      // 兼容火狐
+      link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))
+    }
   }
 }
 </script>

src/utils/index.js

@@ -89,3 +89,17 @@ export function keepCursorEnd (target) {
     range.select()
   }
 }
+
+/**
+ * 将base64图片数据转换成Blob
+ * @param image
+ * @returns {Blob}
+ */
+export function base64toBlob (image) {
+  let bytes = window.atob(image.split(',')[1])
+  let array = []
+  for (let i = 0; i < bytes.length; i++) {
+    array.push(bytes.charCodeAt(i))
+  }
+  return new Blob([new Uint8Array(array)], {type: 'image/png'})
+}

src/views/image/ImageCropper.vue

@@ -35,7 +35,7 @@
             <div class="setting-box">
               <UploadImage @on-success="handleSuccess"/>
               <el-button size="small" type="primary" style="margin-top: 20px">
-                <a @click="downloadImage()">生成图片</a>
+                <a @click="downloadImage">生成图片</a>
               </el-button>
               <a :href="downImg" download="demo.png" ref="downloadDom"></a>
             </div>

src/views/image/ImageSynthesizer.vue

@@ -24,7 +24,7 @@
                 <!-- 图片 -->
                 <img v-if="item.type==='image'" :src="item.src" draggable="false">
                 <!-- 文字 -->
-                <ImageRichText v-if="item.type === 'text'" v-model="item.text" :element="item"/>
+                <ImageRichText v-if="item.type === 'text'" v-model="item.text" :element="item" :activeEleText="activeEleText"/>
               </ElementDrr>
             </div>
           </div>
@@ -45,7 +45,7 @@
                 <UploadImage @on-success="handleAddImage"/>
               </el-form-item>
               <el-form-item label="删除元素">
-                <el-button type="danger" @click="submit">删除元素</el-button>
+                <el-button type="danger" @click="deleteActiveEle">删除元素</el-button>
               </el-form-item>
             </el-form>
             <TextSetting v-if="activeEle.type === 'text'" :activeEleText="activeEleText"/>
@@ -180,20 +180,24 @@ export default {
         x: 160,
         y: 100,
         w: 180,
-        h: 26,
+        h: 36,
         style: {
           textAlign: 'left',
-          lineHeight: '14px',
-          fontSize: '14px',
+          lineHeight: '24px',
+          fontSize: '24px',
           fontFamily: '微软黑体',
           fontWeight: 400,
-          color: '#333',
+          color: '#f70707',
           backgroundColor: '',
-          overflowY: 'hidden'
+          overflow: 'hidden'
         }
       }
-      this.elements.push(text)
-      this.updateActiveEle(text)
+      if (this.elements.length > 4) {
+        this.$message.warning('图片上最多叠加5个元素！')
+      } else {
+        this.elements.push(text)
+        this.updateActiveEle(text)
+      }
     },
     // 添加图片
     addImage (imgObj) {
@@ -209,9 +213,13 @@ export default {
         src: imgObj.src,
         size: imgObj.size
       }
-      this.elements.push(image)
-      if (imgObj.active) {
-        this.updateActiveEle(image)
+      if (this.elements.length > 4) {
+        this.$message.warning('图片上最多叠加5个元素！')
+      } else {
+        this.elements.push(image)
+        if (imgObj.active) {
+          this.updateActiveEle(image)
+        }
       }
     },
     // 上传图片成功
@@ -267,11 +275,19 @@ export default {
         h
       }
     },
+    // 更新当前选中的元素
     updateActiveEle (element) {
       this.activeEle = element
     },
-    submit () {
-      console.log(this.elements)
+    // 删除图片上当前选择的元素
+    deleteActiveEle () {
+      const newElements = this.elements.filter(item => {
+        return item.tag !== this.activeEle.tag
+      })
+      this.$nextTick(() => {
+        this.elements = newElements
+      })
+      this.updateActiveEle({})
     }
   }
 }