bug

src/shareImg.js

+function generateQrcode(obj) {
+    $('#' + obj.domSourceId).find('.qrcode').html(obj.qrcode)
+    var typeNumber = 0;
+    var errorCorrectionLevel = 'L';
+    var qr = qrcode(typeNumber, errorCorrectionLevel);
+    console.log(typeNumber)
+    qr.addData(obj.qrcode);
+    qr.make();
+    $('#' + obj.domSourceId).find('.qrcode').html(qr.createImgTag());
+}
+
+function htmlToBase64(obj, callback) {
+    var htmlObj = {}
+        // $('#' + obj.domTargetId).empty();
+
+    htmlObj = {
+        domSourceId: obj.domSourceId,
+        domTargetId: obj.domTargetId,
+        pic: $('#' + obj.domSourceId).find('img').eq(0).attr('src'),
+        authorImg: $('#' + obj.domSourceId).find('img').eq(1).attr('src'),
+        title: $('#' + obj.domSourceId).find('.share-title').html(),
+        subTitle: $('#' + obj.domSourceId).find('.share-subtitle').html(),
+        authorName: $('#' + obj.domSourceId).find('.share-author b').html(),
+        qrcode: $('#' + obj.domSourceId).find('.qrcode').data('qrcode')
+    }
+    generateQrcode(htmlObj)
+
+    var imgList = [{
+        id: '.share-pic',
+        value: htmlObj.pic
+    }, {
+        id: '.share-author img',
+        value: htmlObj.authorImg
+    }]
+
+    var getBas64 = (url, outputFormat = 'image/png') => {
+
+        return new Promise(function(resolve, reject) {
+            var canvas = document.createElement('canvas'),
+                ctx = canvas.getContext('2d'),
+                img = new Image;
+            img.crossOrigin = 'Anonymous';
+            img.onload = function() {
+
+
+                canvas.height = img.height;
+                canvas.width = img.width;
+                ctx.drawImage(img, 0, 0);
+                var dataURL = canvas.toDataURL(outputFormat);
+                canvas = null;
+
+                resolve(dataURL);
+            };
+            img.src = url;
+        })
+    }
+
+    Promise.all(imgList.map((item) => getBas64(item.value))).then(function(result) {
+
+        result.forEach((v, k) => {
+            $('#' + obj.domSourceId + ' ' + imgList[k].id).attr('src', v);
+        })
+
+        var scaleBy = 2
+        var owidth = $("#" + obj.domSourceId).outerWidth();
+        var oheight = $("#" + obj.domSourceId).outerHeight();
+        console.log(owidth)
+        console.log(oheight)
+        var mycanvas = document.createElement("canvas");
+        mycanvas.height = oheight * scaleBy;
+        mycanvas.width = owidth * scaleBy;
+        mycanvas.style.width = owidth + "px";
+        mycanvas.style.height = oheight + "px";
+
+        var cxt = mycanvas.getContext("2d");
+        cxt.scale(scaleBy, scaleBy);
+
+        console.log(document.getElementById(obj.domSourceId))
+        html2canvas(document.getElementById(obj.domSourceId), {
+            useCORS: true,
+            allowTaint: true,
+            canvas: mycanvas,
+            // width: owidth,
+            // height: oheight,
+            background: '#fff',
+            // logging: true,
+            onrendered: function(canvas) {
+                var resImgUrl = canvas.toDataURL();
+                var img = new Image;
+                img.src = resImgUrl;
+                // $('#' + obj.domTargetId).empty();
+                $('#' + obj.domTargetId).html(img);
+                callback();
+            }
+        })
+    })
+}
\ No newline at end of file

src/style.css

+.f-cb:after,
+.f-cbli li:after {
+    display: block;
+    clear: both;
+    visibility: hidden;
+    height: 0;
+    overflow: hidden;
+    content: '.'
+}
+
+.f-cb,
+.f-cbli li {
+    zoom: 1
+}
+
+.f-ib {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1
+}
+
+.f-dn {
+    display: none
+}
+
+.f-db {
+    display: block
+}
+
+.f-fl {
+    float: left
+}
+
+.f-fr {
+    float: right
+}
+
+.f-pr {
+    position: relative
+}
+
+.f-prz {
+    position: relative;
+    zoom: 1
+}
+
+.f-oh {
+    overflow: hidden
+}
+
+.f-ff0 {
+    font-family: arial
+}
+
+.f-ff1 {
+    font-family: "Microsoft YaHei", arial
+}
+
+.f-fs1 {
+    font-size: 12px
+}
+
+.f-fs2 {
+    font-size: 14px
+}
+
+.f-fwn {
+    font-weight: normal
+}
+
+.f-fwb {
+    font-weight: bold
+}
+
+.f-tal {
+    text-align: left
+}
+
+.f-tac {
+    text-align: center
+}
+
+.f-tar {
+    text-align: right
+}
+
+.f-taj {
+    text-align: justify;
+    text-justify: inter-ideograph
+}
+
+.f-vam,
+.f-vama * {
+    vertical-align: middle
+}
+
+.f-wsn {
+    word-wrap: normal;
+    white-space: nowrap
+}
+
+.f-pre {
+    overflow: hidden;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-all
+}
+
+.f-wwb {
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-all
+}
+
+.f-ti {
+    overflow: hidden;
+    text-indent: -30000px
+}
+
+.f-ti2 {
+    text-indent: 2em
+}
+
+.f-lhn {
+    line-height: normal
+}
+
+.f-tdu,
+.f-tdu:hover {
+    text-decoration: underline
+}
+
+.f-tdn,
+.f-tdn:hover {
+    text-decoration: none
+}
+
+.f-toe {
+    overflow: hidden;
+    word-wrap: normal;
+    white-space: nowrap;
+    text-overflow: ellipsis
+}
+
+.f-csp {
+    cursor: pointer
+}
+
+.f-csd {
+    cursor: default
+}
+
+.f-csh {
+    cursor: help
+}
+
+.f-csm {
+    cursor: move
+}
+
+.f-usn {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none
+}
+
+.f-bc {
+    margin-left: auto;
+    margin-right: auto
+}
+
+.f-db {
+    display: block
+}
+
+.f-dib {
+    display: inline-block
+}
+
+.f-dn {
+    display: none
+}
+
+.f-pr {
+    position: relative
+}
+
+.f-pa {
+    position: absolute
+}
+
+.f-pf {
+    position: absolute
+}
+
+.canvas-html {
+    width: 7.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding: .35rem;
+    box-sizing: border-box;
+    background: #fff;
+    position: absolute;
+    left: 0;
+    top: 0
+}
+
+.canvas-html .share-title {
+    font-size: .44rem;
+    font-weight: normal;
+    margin-bottom: .25rem
+}
+
+.canvas-html .share-pic {
+    width: 6.8rem;
+    height: auto;
+    margin-bottom: .2rem
+}
+
+.canvas-html .share-subtitle {
+    font-size: .36rem;
+    font-weight: normal;
+    float: left;
+    padding: .1rem 0;
+    width: 50%
+}
+
+.canvas-html .share-author {
+    height: .7rem;
+    line-height: .7rem;
+    float: right
+}
+
+.canvas-html .share-author span {
+    width: .7rem;
+    height: .7rem;
+    border-radius: 50%;
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: middle
+}
+
+.canvas-html .share-author span img {
+    width: 100%;
+    height: 100%
+}
+
+.canvas-html .share-author b {
+    display: inline-block;
+    height: .7rem;
+    line-height: .7rem;
+    vertical-align: middle;
+    font-size: .32rem;
+    margin-left: .1rem;
+    font-weight: normal
+}
+
+.canvas-html .share-qrcode {
+    margin-top: .3rem
+}
+
+.canvas-html .share-qrcode img {
+    width: 1.04rem;
+    height: 1.04rem;
+    float: right
+}
+
+.canvas-html .share-qrcode p {
+    color: #999;
+    margin-right: .1rem;
+    float: right;
+    text-align: right;
+    font-size: .28rem;
+    margin-top: .1rem
+}
+
+.canvas-img {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    overflow: auto
+}
+
+.canvas-img img {
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    display: block;
+}
+
+
+/*# sourceMappingURL=./style.css.map */
\ No newline at end of file