使用canvas将照片和海报边框图片合成海报的移动端例子

最新推荐文章于 2024-08-02 09:32:08 发布

喵大嗷

最新推荐文章于 2024-08-02 09:32:08 发布

阅读量3.6k

点赞数

分类专栏： html5 文章标签： html2canvas canvas

本文链接：https://blog.csdn.net/connie_0217/article/details/80663227

版权

本文介绍了如何使用Vue、html2canvas和exif-js在移动端实现照片加相框合成海报的功能。首先，通过input选择图片并利用exif-js修正旋转问题。然后，用户可以选择海报模板，接着实现照片的缩放和移动操作。最后，借助html2canvas进行截图，但在过程中遇到了图片截取出现白边/黑边的问题，作者在另一篇博客中详细记录了解决方案。

摘要由CSDN通过智能技术生成

需求：
类似一些美图软件中的给照片加相框的操作
1. 用户选择照片，照片可以移动、可以放大缩小
2. 选择海报模版
3. 生成海报
最后生成的海报效果图类似下图
这里写图片描述

使用的技术栈是：vue+html2canvas+exif-js
具体思路和代码：

html部分，思路和逻辑在代码下面写着

<template>
    <section>
        <div id='posterwrap' v-show='!sharing' ref="wrap">
            <div  ref='posterwrap-inner' class="posterwrap-inner">
                <p v-show='!temp.imgsrc'   @click='chooseimg'></p>
                <!-- 照片预览区 -->
                <div class="preview-img-wrap">
                    <img @touchstart.prevent.stop='touchStart($event, 0)' @touchmove.prevent.stop='touchMove($event, 0,  -1)' @touchend.prevent.stop='touchEnd($event, 0)' :style='{width: 99 * myphoto.scale + "%", height: 99 * myphoto.scale + "%", left: myphoto.x + "px", top: myphoto.y + "px"}' :src="myphoto.imgsrc" id='preview' alt="" ref="img" >
                </div>
                <!-- 选择的海报模版 -->
                <img @touchstart.prevent.stop='touchStart($event, 0)' @touchmove.prevent.stop='touchMove($event, 0)' @touchend.prevent.stop='touchEnd($event, 0)'  :src="temp" alt="" class="tag-item">
            </div>
        </div>
        <!-- 海报模版区 -->
        <div class="footer">
            <