马上就要“十一”国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个“正青春,共成长”的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公司代言,于是就有了技术部前端开发人员即本人为公司来开发这个主题代言活动页面。
开发要求:
1、用户可以从手机相册上传图片或拍照上传图片;
2、用户可以输入为公司代言的地点,如:我在:上海;
3、将用户输入的代言地点及活动二维码生成一张图片供用户保存到手机,以方便发送朋友圈或好友。
功能实现:
1、使用H5的input[type="file"]标签来上传图片,并使用其原生的js代码将其转换成base64字符串的图片;
2、使用canvas将用户输入的代言地点及活动二维码生成一张图片;
3、记录用户生成的图片信息。
看似简单的功能实现,实则麻烦多多。首先,自己本身对canvas不熟悉,平时基本不用,做的时候算是现学现用;其次,在使用canvas画图时,在IOS上竖拍的图片会被自动旋转90度,导致出来的图片不是用户拍时的效果,具体原因请参考iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案,这里才是本次开发的难点所在,这个问题折腾了我两三天的时间啊,不知道IOS为何要这么做,我也是查了好多资料,最终才得意解决。

代码实现:
1、上传代码使用到了H5的input[type="file"]:

<input type="file" class="uploadfile" accept="image/*">

2、生成base64字符串的图片:

/图片上传
var file = {
    upload: function (e) {
        var file = e.target.files[0];
        var type = file.type.split('/')[0];
        if (type != 'image') {
            alert('请上传图片');
            return;
        }

        //var size = Math.floor(file.size / 1024 / 1024);
        //if (size > 3) {
        //    alert('图片大小不得超过3M');
        //    return;
        //};

        var reader = new FileReader();
        reader.readAsDataURL(file);

        var orientation = null;
        //获取照片方向角属性,用户旋转控制
        EXIF.getData(file, function () {
            EXIF.getAllTags(this);
            orientation = EXIF.getTag(this, 'Orientation');
        });

         reader.onloadstart = function () {
             $(".ajaxLoading").show();
         };
        reader.onloadend = function (e) {
            var dataURL = reader.result;
            var imaged = new Image();
            imaged.src = dataURL;
            imaged.onload = function () {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                //普通环境下设置canvas的宽高
                var w = 0,
                    h = 0;
                if (this.width < 750) {
                    w = this.width;
                    h = this.height;
                    canvas.width = w;
                    canvas.height = h;
                } else {
                    w = 750;
                    canvas.width = w;
                    var scale = this.width / this.height;
                    w = w > this.width ? this.width : w
                    h = w / scale;
                    canvas.height = h;
                }                

                if (navigator.userAgent.match(/iphone/i)) {
                    if (orientation != "") {
                        switch (orientation) {
                            case 3:
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(this, -w, -h, w, h);
                                break;
                            case 6:
                                //这里由于将图片纠正了回来,所以也要重新设置canvas的高已达到高度自适应
                                canvas.width = 750;
                                var scale = this.height / this.width;
                                canvas.height = canvas.width / scale;
                                h = 750 > this.height ? this.height : 750;
                                w = h / scale;
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(this, 0, -h, w, h);
                                break;
                            case 8:
                                ctx.rotate(270 * Math.PI / 180);
                                ctx.drawImage(this, -h, 0, h, w);
                                break;
                            case 2:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.drawImage(this, 0, 0, w, h);
                                break;
                            case 4:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(this, -w, -h, w, h);
                                break;
                            case 5:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(this, 0, -w, h, w);
                                break;
                            case 7:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(270 * Math.PI / 180);
                                ctx.drawImage(this, -h, 0, h, w);
                                break;
                            default:
                                ctx.drawImage(this, 0, 0, w, h);
                        }
                    }
                } else {
                    ctx.drawImage(this, 0, 0, w, h);
                }           

                $.post(ulr, { base64_string: canvas.toDataURL('image/jpeg') }, function (res) {
                    if (res.success) {
                        $("#daiyan_bg").attr("src", res.message);
                        $(".ajaxLoading").hide();
                        var qrCodeH = 0;
                        if (navigator.userAgent.match(/iphone/i)) {
                            if (orientation != "") {
                                switch (orientation) {
                                    case 6:
                                        qrCodeH = w / 2 - $(".qrcode").height() - 105;
                                        break;
                                    default:
                                        qrCodeH = h / 2 - $(".qrcode").height() - 105;
                                }
                            }
                        } else {
                            var qrCodeH = h / 2 - $(".qrcode").height() - 105;
                        }
                        $(".qrcode").css("top", qrCodeH);
                        $(".page1").hide().siblings(".page2").show();
                    }
                }, "json");
            };
        };
    },
    event: function () {
        $(".uploadfile").change(function (e) {
            file.upload(e);
        });
    },
    init: function () {
        this.event();
    }
};
file.init();

以上js代码中就解决了IOS将图片旋转90度的问题,使用到了exif.js,解决代码如下:

首先获取照片方向角属性orientation :

var orientation = null;
//获取照片方向角属性,用户旋转控制
EXIF.getData(file, function () {
    EXIF.getAllTags(this);
    orientation = EXIF.getTag(this, 'Orientation') ;
});

其次根据orientation来旋转图片即可得到正确的图片:

if (navigator.userAgent.match(/iphone/i)) {
                    if (orientation != "") {
                        switch (orientation) {
                            case 3:
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(this, -w, -h, w, h);
                                break;
                            case 6:
                                canvas.width = 750;
                                var scale = this.height / this.width;
                                canvas.height = canvas.width / scale;
                                h = 750 > this.height ? this.height : 750;
                                w = h / scale;
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(this, 0, -h, w, h);
                                break;
                            case 8:
                                ctx.rotate(270 * Math.PI / 180);
                                ctx.drawImage(this, -h, 0, h, w);
                                break;
                            case 2:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.drawImage(this, 0, 0, w, h);
                                break;
                            case 4:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(this, -w, -h, w, h);
                                break;
                            case 5:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(this, 0, -w, h, w);
                                break;
                            case 7:
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(270 * Math.PI / 180);
                                ctx.drawImage(this, -h, 0, h, w);
                                break;
                            default:
                                ctx.drawImage(this, 0, 0, w, h);
                        }
                    }
                } else {
                    ctx.drawImage(this, 0, 0, w, h);
                }

最后,由于已经使用exif.js来对图片进行了纠正的处理,已经不再是iphone手机拍完照上传时的图片信息了,所以在第二次利用canvas将其生成海报时,就不会再被旋转了,至于第一次用canvas将拍的照片画成750px的图片是不想用户上传到图片服务器的图片过大从而导致加载过慢的问题,再者,如果不考虑上传到图片服务器的图片过大,那么将会生成base64格式的图片字符串,但这里也还有一个隐藏的问题就是在有些iphone手机(我当时测的是iphone 6 plus)上不支持直接将base64格式的图片直接通过canvas画出来,所以为了兼容性,也只能通过后台将base64字符串格式的图片转换为普通的图片格式再来为最后的生成海报服务。
3、生成海报的代码如下:

var pointMsg = $(".pointtxt").val(),
                daiyanMsg = $(".daiyan_msg").html();
            var imgbox = document.getElementById("daiyan_bg"),
                canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            canvas.width = 750;
            var imgUrl = new Image,
                qrCodeUrl = new Image,
                point = new Image;
            imgUrl.crossOrigin = "anonymous";
            imgUrl.src = imgbox.src;
            qrCodeUrl.src = "/Resource/4.0/images/201709daiyan/qrcode.jpg";
            point.src = "/Resource/4.0/images/201709daiyan/point.png";
            var daiyan_text = "我要代颜";
            var btm = document.getElementById("bottom");
            imgUrl.onload = function () {
                canvas.height = this.height + 50;
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, 750, 1334);
                var erWeiMaY = this.height - qrCodeUrl.height - 70;
                var wyDyY = this.height - 57;
                if (ctx.drawImage(imgUrl, 0, 0, 750, this.height), ctx.beginPath(), ctx.beginPath(), ctx.font = "normal 44px PingFangSC-Medium", ctx.textAlign = "start", ctx.textBaseline = "hanging", ctx.shadowOffsetX = 0, ctx.shadowOffsetY = 5, ctx.shadowColor = "rgba(0, 0, 0, 0.3)", ctx.shadowBlur = 5, "" != pointMsg && void 0 != pointMsg && null != pointMsg) {
                    var pTxt = "我在:" + pointMsg;
                    ctx.fillText(pTxt, 95, offy * 2 + 55);
                    ctx.drawImage(point, 0, 0, 42, 55, 40, offy * 2 + 55, 42, 55);
                }

                ctx.beginPath();
                ctx.drawImage(qrCodeUrl, 0, 0, 140, 140, 570, erWeiMaY, 140, 140);
                ctx.drawImage(btm, 0, 0, 750, 50, 0, this.height, 750, 50);

                if (ctx.beginPath(), ctx.font = "normal 22px PingFangSC-Medium") {
                    ctx.fillText(daiyan_text, 595, wyDyY);
                }
![](http://images2017.cnblogs.com/blog/688074/201709/688074-20170930143321965-1499864646.jpg)

                if (ctx.beginPath(), ctx.font = "normal 30px PingFangSC-Medium", ctx.shadowOffsetX = 0, ctx.shadowOffsetY = 5, ctx.shadowColor = "rgba(0, 0, 0, 0.3)", ctx.shadowBlur = 5) {
                    ctx.fillText(daiyanMsg, 95, offy * 2 + 130);
                }

                document.getElementById("daiyan_bg1").src = canvas.toDataURL('image/jpeg');

                $(".page2").hide().siblings(".page3").show();

                $.post(url, { base64_string: canvas.toDataURL('image/jpeg') }, function (res) { }, "json");    //记录用户生成的海报信息

                var tipTop = this.height / 4 - 47;
                $(".save_tip").show().css("top", tipTop);
                setTimeout(function () {
                    $(".save_tip").hide();
                }, 3000);
            };

在这一步生成的海报其实也是base64字符串格式的图片,此时就可以用微信浏览器的长按保存功能将图片保存至手机上。至此,完成全部的开发。

案例代码下载:
H5上传图片并使用canvas制作海报

在案例代码中加入了可以拖动用户输入文字那块的效果,那块的效果在做的时候其实也是折腾了两三个小时。原因如下:
产品要求用户可以输入文字,所以就加了一个input文本表单,但是又要求输入文字那里可以拖动,因此出现了新的问题:在拖动的touchstart事件里加入了ev.preventDefault()来禁止浏览器的默认行为,那么在触摸input文本表单时,input就无法获取焦点。
解决思路及办法:
刚开始想的是能不能在touchend的时候释放前边禁止的浏览器默认行为,结果就是然并卵,因为即使你在触摸结束时释放浏览器的默认行为,但触摸时又给禁止了,真该打自己。接着又想着能不能在页面加载完成后就禁止,结果还是然并卵,然后想到的是在触摸时就让input获取焦点focus,但是如果input中已经输入了文字,那么触摸时焦点就位于文字的最后而无法将焦点具体定位在文字中的某个地方,还是然并卵,于是就各种上网查资料也还是没有解决。最后想到的是获取手指触摸的元素,如果触摸的是input表单,那么就不禁止浏览器的默认行为,否则就禁止,这样带来的结果是虽然在触摸input时也可以拖动,但浏览器的默认行为没有被禁止,在微信中,如果向下拖动,浏览器的上边就会出现那个显示浏览器内核信息的黑色底,不过在触摸input表单边上的其他区域时是可以禁止浏览器的默认行为并拖动的,虽不完美,但实在是没有找到其他的解决办法了,如果有大神知道完美解决的办法,请及时告知,先在此谢过!!!

H5上传图片并使用canvas制作海报的更多相关文章

  1. Canvas 制作海报

      HTML <template> <view class="content"> <view class="flex_row_c_c mod ...

  2. H5上传图片之canvas

    H5上传图片之canvas,使用canvas处理压缩图片再上传 html代码: <form action="" method="post"> < ...

  3. angular下H5上传图片(可多张上传)

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...

  4. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

  5. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  6. <canvas合成海报>所遇问题及解决方案总结

    最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...

  7. H5动效的常见制作手法

    众所周知,一个元素,动往往比静更吸引眼球: 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验: 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表 ...

  8. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  9. 酷!使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

随机推荐

  1. node.js学习系列(一)

     node.js 百度百科简介 Node.js 是一个 Javascript 运行环境(runtime).实际上它是对 Google V8 引擎进行了封装.V8 引 擎执行 Javascript 的速 ...

  2. [2017-09-04]Abp系列——为什么值对象必须设计成不可变的

    本系列目录:Abp介绍和经验分享-目录 这篇是之前翻备忘录发现漏了的,前阵子刚好同事又提及过这个问题,这里补上. 本文重点在于理解什么是值对象的不可变性. Abp的ValueObject以及EF的Co ...

  3. 面试题收集---grep和find的区别

    grep是通过文件找内容 find 是通过内容找文件 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来. 而linux下的find, 在目录结构 ...

  4. C# FTP上传与下载文件

    public class UploadFile { string ftpServerIP; string ftpRemotePath; string ftpUserID; string ftpPass ...

  5. WPF依赖属性2

    前一个博客,介绍了依赖属性的基本定义,在定义的过程中register中的的两个参数,并没有传入参数,不知道其是用来干什么的,以下,我们将介绍这两个参数的真正用途FrameworkPropertyMet ...

  6. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  7. 在centos6上实现编译安装lamp和wordpress,并编译xcache

    author:JevonWei 版权声明:原创作品 软件环境: centos6.9 httpd-2.4.27.tar.bz2 apr-1.5.2.tar.bz2 apr-util-1.5.4.tar. ...

  8. mysql:Linux系统下mysql5.6的安装卸载

    1.1. 下载rpm包 要使用yum 安装mysql,需要mysql的yum仓库,先从官网下载适合你系统的仓库 http://dev.mysql.com/downloads/repo/yum/ 我的是 ...

  9. 大型网站的 HTTPS 实践(二)——HTTPS 对性能的影响

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt388 HTTPS 在保护用户隐私,防止流量劫持方面发挥着非常关键的作用,但与 ...

  10. 使用imageLoader加载图片资源