{"id":8105,"date":"2020-07-01T18:03:10","date_gmt":"2020-07-01T10:03:10","guid":{"rendered":"https:\/\/sdeno.com\/?p=8105"},"modified":"2020-07-01T18:03:10","modified_gmt":"2020-07-01T10:03:10","slug":"js%e5%b0%86url%e5%9b%be%e7%89%87%e5%9c%b0%e5%9d%80%e8%bd%acbase64","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8105","title":{"rendered":"js\u5c06url\u56fe\u7247\u5730\u5740\u8f6cbase64"},"content":{"rendered":"<p>\u5173\u952e\u8fd8\u662f\u8981\u901a\u8fc7canvas\u5bf9\u8c61\u7684toDataURL\u65b9\u6cd5\u53bb\u5b9e\u73b0<\/p>\n<pre>&lt;div id=\"showme\"&gt;&lt;\/div&gt;\r\n\r\n\r\nlet imgSrc = \"https:\/\/cdnpw.chinaesport.com\/kdhxoi\/storage\/emulated\/0\/tencent\/MicroMsg\/WeiXin\/mmexport1592366797764.webp\";\r\n\r\n\/\/width\u3001height\u8c03\u7528\u65f6\u4f20\u5165\u5177\u4f53\u50cf\u7d20\u503c\uff0c\u63a7\u5236\u5927\u5c0f ,\u4e0d\u4f20\u5219\u9ed8\u8ba4\u56fe\u50cf\u5927\u5c0f\r\nfunction getBase64Image(img, width, height) {\r\n    var canvas = document.createElement(\"canvas\");\r\n    canvas.width = width ? width : img.width;\r\n    canvas.height = height ? height : img.height;\r\n    var ctx = canvas.getContext(\"2d\");\r\n    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n    var dataURL = canvas.toDataURL();\r\n    return dataURL; \/\/\u8fd4\u56debase64\r\n}\r\n\r\n\r\n\r\n\r\nfunction getCanvasBase64(img) {\r\n    var image = new Image();\r\n    \/\/\u81f3\u5173\u91cd\u8981\r\n    image.crossOrigin = '';\r\n    image.src = img;\r\n    \/\/\u81f3\u5173\u91cd\u8981\r\n    var deferred = $.Deferred();\r\n    if (img) {\r\n        image.onload = function () {\r\n            console.log(image) \/\/\u5c06&lt;img crossorigin=\"\" src=\"xx.webp\"&gt;\u503c\u4f20\u7ed9canvas\u5904\u7406\r\n            deferred.resolve(getBase64Image(image));\/\/\u5c06base64\u4f20\u7ed9done\u4e0a\u4f20\u5904\u7406\r\n        }\r\n        return deferred.promise();\/\/\u95ee\u9898\u8981\u8ba9onload\u5b8c\u6210\u540e\u518dreturn sessionStorage['imgTest']\r\n    }\r\n}\r\n\r\n\/\/\u8c03\u7528\r\ngetCanvasBase64(imgSrc)\r\n    .then(function (base64) {\r\n        \/\/ \u8fd9\u91cc\u62ff\u5230\u7684\u662f\u8f6c\u6362\u540e\u7684base64\u5730\u5740\uff0c\u53ef\u4ee5\u505a\u5176\u4ed6\u64cd\u4f5c\r\n        \/\/ console.log(\"\u65b9\u5f0f\u4e8c\u300b\u300b\u300b\u300b\u300b\u300b\u300b\u300b\u300b\",base64);\r\n        $('&lt;img src=\"'+base64+'\"&gt;').appendTo('#showme')\r\n    }, function (err) {\r\n        console.log(err);\r\n    });<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5173\u952e\u8fd8\u662f\u8981\u901a\u8fc7canvas\u5bf9\u8c61\u7684toDataURL\u65b9\u6cd5\u53bb\u5b9e\u73b0 &lt;div id=&#8221;showme&#8221;&gt;&#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-8105","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8105"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8105\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}