前端
<pre class="brush: js line-numbers language-js" style="background: url("../../img/blueprint-dark.fd85a7a074ae.png") center top rgb(250, 251, 252); margin-top: 0px; margin-bottom: 20px; padding: 1em 1em 1em 3.8em; border-width: 0px 0px 0px 5px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: solid; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: rgb(85, 138, 187); border-image: initial; font-size: 14px; line-height: 1.5; color: rgb(59, 60, 64); overflow: auto; font-family: Consolas, Monaco, "Andale Mono", monospace; text-shadow: none; direction: ltr; text-align: left; word-break: normal; word-wrap: normal; tab-size: 4; hyphens: none; position: relative; counter-reset: linenumber 0;"><code class=" language-js" style="word-wrap: normal; margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; text-shadow: none; direction: ltr; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; position: relative;"><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 170);">var</span> img <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> <span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 170);">new</span> <span class="token class-name" style="margin: 0px; padding: 0px; border: 0px;">Image</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span><br> canvas <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> document<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);">createElement</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);">"canvas"</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span><br> ctx <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> canvas<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);">getContext</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);">"2d"</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span><br> src <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> <span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);">"http://example.com/image"</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span> <span class="token comment" spellcheck="true" style="margin: 0px; padding: 0px; border: 0px; display: inherit; color: rgb(112, 128, 144);">// insert image url here</span><br><br>img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>crossOrigin <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> <span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);">"Anonymous"</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br><br>img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>onload <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> <span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 170);">function</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">{</span><br> canvas<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>width <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>width<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br> canvas<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>height <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>height<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br> ctx<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);">drawImage</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span> <span class="token number" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);">0</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span> <span class="token number" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);">0</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br> localStorage<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);">setItem</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span> <span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);">"savedImageData"</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span> canvas<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);">toDataURL</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);">"image/png"</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">}</span><br>img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>src <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> src<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br><span class="token comment" spellcheck="true" style="margin: 0px; padding: 0px; border: 0px; display: inherit; color: rgb(112, 128, 144);">// make sure the load event fires for cached images too</span><br><span class="token keyword" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 170);">if</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">(</span> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>complete <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">||</span> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>complete <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">===</span> undefined <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">)</span> <span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">{</span><br> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>src <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> "data<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">:</span>image<span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">/</span>gif<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span>base64<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">,</span>R0lGODlhAQABAIAAAAAAAP<span class="token comment" spellcheck="true" style="margin: 0px; padding: 0px; border: 0px; display: inherit; color: rgb(112, 128, 144);">///ywAAAAAAQABAAACAUwAOw==";</span><br> img<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">.</span>src <span class="token operator" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);">=</span> src<span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">;</span><br><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);">}</span></code></pre>
