用canvas画布制作首尾衔接图片源码

马黑黑 发表于 2024-3-27 12:06

本帖最后由马黑黑于 2024-3-27 13:37 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1"><!DOCTYPE html></cl-cd>
<cl-cd data-idx="2"><html lang="zh"></cl-cd>
<cl-cd data-idx="3"><head></cl-cd>
<cl-cd data-idx="4"><meta charset="utf-8" /></cl-cd>
<cl-cd data-idx="5"><title>首尾衔接图片制作</title></cl-cd>
<cl-cd data-idx="6"></head></cl-cd>
<cl-cd data-idx="7"><body></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><div id="papa" style="margin-top:20px;text-align:center;"></div></cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"><script></cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<cl-cd data-idx="13">let oImg = new Image(); /* 创建 Image 对象 */</cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15">/* 图片加载事件：加载完毕运行花括号内的代码 */</cl-cd>
<cl-cd data-idx="16">oImg.onload = () => {</cl-cd>
<cl-cd data-idx="17">    /* 创建 canvas 画布 */</cl-cd>
<cl-cd data-idx="18">    let canv = document.createElement('canvas');</cl-cd>
<cl-cd data-idx="19">    canv.style.border = '1px solid gray';</cl-cd>
<cl-cd data-idx="20">    let ww = canv.width = oImg.width * 2; /* 画布宽为图片的两倍 */</cl-cd>
<cl-cd data-idx="21">    let hh = canv.height = oImg.height; /* 画布高度和图片一致 */</cl-cd>
<cl-cd data-idx="22">    console.log(ww);</cl-cd>
<cl-cd data-idx="23">    papa.appendChild(canv); /* 画布追加到 id="papa" 元素 */</cl-cd>
<cl-cd data-idx="24">    let ctx = canv.getContext('2d'); /* 取得画笔 */</cl-cd>
<cl-cd data-idx="25">    /* 第一次绘制图片：左半边 */</cl-cd>
<cl-cd data-idx="26">    ctx.drawImage(oImg, 0, 0, ww / 2, hh, 0, 0, ww / 2, hh);</cl-cd>
<cl-cd data-idx="27">    ctx.save(); /* 保存画布状态 */</cl-cd>
<cl-cd data-idx="28">    ctx.translate(ww, 0); /* 移动画布坐标系到X方向末端，Y方向不变 */</cl-cd>
<cl-cd data-idx="29">    ctx.scale(-1, 1); /* 左右逆转画布坐标系 */</cl-cd>
<cl-cd data-idx="30">    /* 第二次绘制图片：右半边 */</cl-cd>
<cl-cd data-idx="31">    ctx.drawImage(oImg, 0, 0, ww / 2, hh, 0, 0, ww / 2, hh);</cl-cd>
<cl-cd data-idx="32">    ctx.restore(); /* 还原画布状态 */</cl-cd>
<cl-cd data-idx="33">};</cl-cd>
<cl-cd data-idx="34"> </cl-cd>
<cl-cd data-idx="35">/* 图片地址：本地运行可以是本地图片 */</cl-cd>
<cl-cd data-idx="36">oImg.src = 'https://638183.freep.cn/638183/Pic/fj2.jpg';</cl-cd>
<cl-cd data-idx="37"> </cl-cd>
<cl-cd data-idx="38"></script></cl-cd>
<cl-cd data-idx="39"> </cl-cd>
<div class="tGreen"><cl-cd data-idx="40"></cl-cd></div>
<cl-cd data-idx="89"> </cl-cd>
<cl-cd data-idx="90"></body></cl-cd>
<cl-cd data-idx="91"></html></cl-cd>
</div>

马黑黑 发表于 2024-3-27 12:11

请将代码复制到文本编辑器（例如记事本），将图片地址替换为自己希望加工的图片，保存为 .html 文档，然后找到该文档双击运行（浏览器注意不要使用 IE 或 IE内核的）。图片地址无误的话，可在浏览器中看到结果。右击图片另存为即可。

朵拉发表于 2024-3-27 12:11

这是为笨学生编辑的代码么？
我研究下，谢谢老师~~{:4_190:}{:4_204:}

南无月 发表于 2024-3-27 18:12

马黑黑发表于 2024-3-27 12:11
请将代码复制到文本编辑器（例如记事本），将图片地址替换为自己希望加工的图片，保存为 .html 文档，然后 ...

天哪，原来是这么用的。。另存就可以{:4_170:}这也太方便了。。

中午还想说怎么整到贴子里去呢。。

南无月 发表于 2024-3-27 18:13

新工具，这段代码得存着。。。{:4_199:}

马黑黑 发表于 2024-3-27 18:23

南无月发表于 2024-3-27 18:13
新工具，这段代码得存着。。。

偶尔会有点用

马黑黑 发表于 2024-3-27 18:25

南无月发表于 2024-3-27 18:12
天哪，原来是这么用的。。另存就可以这也太方便了。。

中午还想说怎么整到贴子里去呢。。

{:4_172:}

canvas画布实时画出来的东东都可以右键另存为，包括帖子里的。你可以试一下在我站里的胜利，它是不一样的

马黑黑 发表于 2024-3-27 18:25

朵拉发表于 2024-3-27 12:11
这是为笨学生编辑的代码么？
我研究下，谢谢老师~~

{:4_190:}

红影发表于 2024-3-27 19:43

这个好，直接把图片对接起来了，还能下载，就便于修改图图了呢{:4_199:}

红影发表于 2024-3-27 19:44

还以为各取一半，还是700宽，结果成了1400宽，很奇特。
看代码里是取了一半的啊。

樵歌发表于 2024-3-27 19:54

拿着勺子喂{:4_189:}

马黑黑 发表于 2024-3-27 19:57

红影发表于 2024-3-27 19:44
还以为各取一半，还是700宽，结果成了1400宽，很奇特。
看代码里是取了一半的啊。

你看第 20 代码

马黑黑 发表于 2024-3-27 19:58

樵歌发表于 2024-3-27 19:54
拿着勺子喂

吃瓜皮是用左手抓的{:4_170:}

南无月 发表于 2024-3-27 20:05

马黑黑发表于 2024-3-27 18:23
偶尔会有点用

工具么。有的用得多，有的用得少。。反正都有用。。存库里了。。{:4_173:}

南无月 发表于 2024-3-27 20:10

马黑黑发表于 2024-3-27 18:25
canvas画布实时画出来的东东都可以右键另存为，包括帖子里的。你可以试一下在我站里的胜利 ...

https://pic.imgdb.cn/item/66040c879f345e8d03aa917f.png

南无月 发表于 2024-3-27 20:11

马黑黑发表于 2024-3-27 18:25
canvas画布实时画出来的东东都可以右键另存为，包括帖子里的。你可以试一下在我站里的胜利 ...

{:4_170:}
看到了，连视频一起存了。。
想截个显示小天使的，试了三四次都木有。。。
是巧合还是截不上？

南无月 发表于 2024-3-27 20:14

马黑黑发表于 2024-3-27 18:25
canvas画布实时画出来的东东都可以右键另存为，包括帖子里的。你可以试一下在我站里的胜利 ...

用我站里的胜利试了一下，除了图片啥也截不到。。视频也没有，小天使也没有。。
{:4_170:}

马黑黑 发表于 2024-3-27 20:39

南无月发表于 2024-3-27 20:14
用我站里的胜利试了一下，除了图片啥也截不到。。视频也没有，小天使也没有。。

你那里一样，视频独立

马黑黑 发表于 2024-3-27 20:40

南无月发表于 2024-3-27 20:11
看到了，连视频一起存了。。
想截个显示小天使的，试了三四次都木有。。。
是巧合还是截不 ...

小天使截不到的，它是独立的图片，没有加入画布

南无月 发表于 2024-3-27 20:44

马黑黑发表于 2024-3-27 20:39
你那里一样，视频独立

嗯哪，，我刚才三个全试了。只有你那里能一起截视频{:4_170:}

页: [1] 2 3 4 5

花潮论坛's Archiver

用canvas画布制作首尾衔接图片源码