海报生成-canvas

小程序海报生成-canvas

<canvas
            @click.stop=""
            :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
            canvas-id="my-canvas"
        ></canvas>
        <view class="save-btn" @click.stop="saveImage">下载到相册</view>
    </view>

bug 打包成h5端, 弹幕动画效果不显示, 原因: 属性绑定v-bind:style="{animation:'dmAnimation'}"没有成功, 换成css引入

图片压缩

const MAX_WIDTH = 300   
const MAX_HEIGHT = 300   
const MIME_TYPE = 'image/jpeg'   
const QUALITY = 0.7   
const customRequestMinio1 = (data) => {      
loading1.value = true      
let w = 0,         
h = 0      
let reader = new FileReader()      
let flag = false      
reader.readAsDataURL(data.file)      
reader.onload = () => {         
const image = new Image()         
image.src = reader.result         
image.onload = () => {            
const [newWidth, newHeight] = calculateSize(image, MAX_WIDTH, MAX_HEIGHT)            
const canvas = document.createElement('canvas')            
canvas.width = newWidth            
canvas.height = newHeight            
const ctx = canvas.getContext('2d')            
ctx.drawImage(image, 0, 0, newWidth, newHeight)            
canvas.toBlob(               
(blob) => {                  
const fileData = new FormData()                  
const file = new File([blob], 'icon.png', { type: 'image/png' })                  
fileData.append('file', file)                  
fileApi                     
.fileUploadMinioReturnUrl(fileData)                     
.then((res) => {                        
formData.value.goodsUrl = res                     
})                     
.finally(() => {                        
loading1.value = false                     
})               
},               
MIME_TYPE,               
QUALITY            
)            
return            
w = image.width            
h = image.height            
if (w > 300 || h > 300) {               
loading1.value = false               
return message.error('图片尺寸错误，只能上传宽高小于300px*300px的图片')            
} else {               
const fileData = new FormData()               
fileData.append('file', data.file)               
fileApi                  
.fileUploadMinioReturnUrl(fileData)                  
.then((res) => {                     
// console.log(res)                     
formData.value.goodsUrl = res                  
})                  
.finally(() => {                     
loading1.value = false                  
})            
}         
}      
}   
}