【你画我猜】成图上传V2，一键简化操作

增强版 简单便捷

新增内容v2：

• 图片自适应大小 任意宽高本地图片，上传后自动布局居中。
• 占用更大的画幅 突破画猜的扁长画幅限制，图片更大更爽！
• 简化的操作步骤 便捷选取本地图片文件，无需额外预处理~
  
• 代码书签秒运行 制作书签栏快捷方式，告别代码与控制台。
  

追加更新v2.1：

• 四周增加内边距，小图不挡字、大图更美观
  

追加更新v2.2：推荐使用！

• 修复了图像变糊的问题，看起来更清晰了有木有
• 顺带修复v2.0的模糊
  

附强迫症最佳尺寸比例：
（固定比例放缩可减少留白区域
1000×694 : v2.0 适用于技术佬设计布局
880×574 : v2.2 预设边距，安心上传

效果怎么样玩画猜的都见过，不多做介绍噜。

使用方法：

• 制作书签一键，仅首次需要。
• 点击书签运行代码添加组件。
• 交互组件选取本地图片即可自动绘制。
  

详细步骤：

• 制作一键书签（仅尝鲜的可直接跳到步骤2从控制台输入）
  通常情况下浏览器书签用来保存网址便捷访问，这一次我们用它来保存js代码来一键执行。
  具体操作是：先建立任意书签(快捷键Ctrl+D)，然后修改其内容(点击'更多...'按钮)。
  其中名称一栏任意填写，网址一栏复制以下代码填入。保存完成√
  
  javascript:var padding=30;var par=document.getElementsByClassName("btn")[0];var ct=document.getElementsByClassName("canvas")[0].childNodes[0];var ctx=ct.getContext("2d");var devicePixelRatio=window.devicePixelRatio||1;var backingStoreRatio=ctx.webkitBackingStorePixelRatio||1;var ratio=devicePixelRatio/backingStoreRatio;ctx.scale(ratio,ratio);padding=padding*ratio;ct.style.borderWidth='1px';ct.style.borderStyle='solid';var img=new Image();img.onload=function(){var sh=347*ratio;var sw=500*ratio;var h=img.height;var w=img.width;var ph=sh-padding*2;var pw=sw-padding*2;ct.height=sh;ct.width=sw;ct.style.height=sh;ct.style.width=sw;ctx.clearRect(0,0,ct.width,ct.height);if(w/h>=pw/ph){h=h*(pw/w);w=pw;ctx.drawImage(img,padding,padding+(ph-h)/2,w,h)}else{w=w*(ph/h);h=ph;ctx.drawImage(img,padding+(pw-w)/2,padding,w,h)}};function selectImage(file){if(!file.files||!file.files[0]){return};var reader=new FileReader();reader.onload=function(evt){img.src=evt.target.result};reader.readAsDataURL(file.files[0])};var inputObj=document.createElement('input');inputObj.setAttribute('id','imgInput');inputObj.setAttribute('type','file');inputObj.setAttribute('onchange','selectImage(this)');par.appendChild(inputObj); 复制代码

  javascript:var padding=30;var par=document.getElementsByClassName("btn")[0];var ct=document.getElementsByClassName("canvas")[0].childNodes[0];var ctx=ct.getContext("2d");var img=new Image();img.onload=function(){var sh=347;var sw=500;var h=img.height;var w=img.width;var ph=sh-padding*2;var pw=sw-padding*2;ct.height=sh;ct.width=sw;ctx.clearRect(0,0,ct.width,ct.height);if(w/h>=pw/ph){h=h*(pw/w);w=pw;ctx.drawImage(img,padding,padding+(ph-h)/2,w,h)}else{w=w*(ph/h);h=ph;ctx.drawImage(img,padding+(pw-w)/2,padding,w,h)}};function selectImage(file){if(!file.files||!file.files[0]){return};var reader=new FileReader();reader.onload=function(evt){img.src=evt.target.result};reader.readAsDataURL(file.files[0])};var inputObj=document.createElement('input');inputObj.setAttribute('id','imgInput');inputObj.setAttribute('type','file');inputObj.setAttribute('onchange','selectImage(this)');par.appendChild(inputObj); 复制代码

  javascript:var par=document.getElementsByClassName("btn")[0];var ct=document.getElementsByClassName("canvas")[0].childNodes[0];var ctx=ct.getContext("2d");var devicePixelRatio=window.devicePixelRatio||1;var backingStoreRatio=ctx.webkitBackingStorePixelRatio||1;var ratio=devicePixelRatio/backingStoreRatio;ctx.scale(ratio,ratio);ct.style.borderWidth='1px';ct.style.borderStyle='solid';var img=new Image();img.onload=function(){var h=img.height;var w=img.width;if(w/h>=500/347){h=h*(500/w);w=500}else{w=w*(347/h);h=347}ct.height=h*ratio;ct.width=w*ratio;ct.style.height=h;ct.style.width=w;ctx.drawImage(img,0,0,ct.width,ct.height)};function selectImage(file){if(!file.files||!file.files[0]){return};var reader=new FileReader();reader.onload=function(evt){img.src=evt.target.result};reader.readAsDataURL(file.files[0])};var inputObj=document.createElement('input');inputObj.setAttribute('id','imgInput');inputObj.setAttribute('type','file');inputObj.setAttribute('onchange','selectImage(this)');par.appendChild(inputObj); 复制代码

• 进入画猜的画图界面，在书签栏点击制作的一键。这时候会发现画布下方多了一个文件选择器√
  Edge浏览器：需要设置书签栏常驻才能运行。还不行就控制台输入吧。
• 和出现的组件交互，选择图片后就会自动绘制在画布上√
  这种方式的绘图可能会和画猜自带的工具相互冲突覆盖，所以尽量传已经最终处理好的图片。
  只有选取的文件有变化时才会触发绘图。
  

最后补全主题和答案就可以提交啦~❀
有任何错误/问题回帖反馈，会持续更新。
金币++;
血液++;
追随++;

据说有个购买全部附件的神奇选项...

来自群组: 画猜探索

狼狼属实把你画我猜玩的明明白白了

虽然但是，我是坚定的鸡爪画派！

这黑科技看得我都想去出题了

楼主这是把你猜我画玩明白了呢。我一直不太懂这个东西。

预感画猜区将迎来空前的繁荣

不错不错，很好很强大

没没没有任何反应

这是直接干碎现有你画我猜出了全新版本了
不过作为鸡爪党也还是狂喜，这样就能先用画图软件画完再传了，比用你画我猜自带的工具方便不少XD

打赏已给，快让我啪！

大佬！这个图片怎么设置大小呢？选完图片后直接就在画布上了，改不了

太狠了，我一直绞尽脑汁想好画的东西再画半天。

居然不压追随噜 犹记当初的"全属性压10全属性压11，不要追随...不要追随..." 话说这个黑科技直接一把子马住

比上次那个转码好用惹 给你13个赞

首先直接用控制台会报错：Uncaught SyntaxError: Illegal return statement

得把他封装到一个function里面，再运行，好像就可以了。

运行之后，选择图片后，画布没反应这属于正常现象吗？

天哪！我现在越来越相信小狼是超级技术大佬了！太厉害了，猫猫好崇拜~一直都觉得程序员很帅是可以说的吗。另，小狼你猜猫猫的那个画猜是猜对了！！快去领金币！

釉色大佬真的厉害啊，感觉要去蹲一波简单出题

说得好，我选择帕金森鼠绘增加难度

甚至有一键功能了，明天次数恢复了研究下

可以的，没想到你还在之前的基础上进行了二次优化，制作了增强版，之前看你一直不需要追随、堕落这些，让我看到你每次发帖都只是多给点血液了，这次看你每一个都可以++，也是第一次都点上了233