canvas转成base64 后生成的图片问题 会有叠影重叠的现象。

SVG格式的图片:图片说明
base64放入img src中:图片说明
代码:图片说明
图片说明

3个回答

export



$(".exportImageButton").on("click", function() {
var svg = document.querySelector("svg");
var rect = document.querySelector("rect")
rect.setAttribute("fill", "green")
var svgData = new XMLSerializer().serializeToString(svg);
var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width * 3;
canvas.height = svgSize.height * 3;
canvas.style.width = svgSize.width;
canvas.style.height = svgSize.height;
var ctx = canvas.getContext("2d");
ctx.scale(3, 3);
var img = document.createElement("img");
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))));
rect.setAttribute("fill", "red")
img.onload = function() {
ctx.drawImage(img, 0, 0);
var canvasdata = canvas.toDataURL("image/png", 1);

var pngimg = '<img src="' + canvasdata + '">';
d3.select("#pngdataurl").html(pngimg);

var a = document.createElement("a");
a.download = "download_img" + ".png";
a.href = canvasdata;
document.body.appendChild(a);
a.click();

};
})

转图片。

Canvas在每次重新绘制前要先进行清除。

var Svg = chart.getSVG();是highchart获取svg的方法。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用html2canvas截图生成的Base64 参数,传递到后台,解析之后下载的图片和截图的图片不一致问题

**1.描述问题场景** 使用 html2canvas.js 工具,进行局部截图,将获取到的Base64码 利用ajax传递到后台进行解码,并输出到指定目录。 # 2.问题: 在将Base64传递到之后,进行解码后,下载的图片和截取的图片不一致问题。还请各位大佬看下什么原因 # 3.代码 前端: ``` js部分 function jietu() { var gdzherf = ''; html2canvas(document.getElementById("container"),{ useCORS:true, height: $("#container").outerHeight() + 20, width: $("#container").outerWidth() + 20 , onrendered : function (canvas) { //获取Base64码 gdzherf = canvas.toDataURL(); $("#base64Name").val(gdzherf); $("#mmg").attr("src",gdzherf); //去下载 $.ajax({ type : "post", url : "${basePath}moduleFile/downloadCanvas?gdzherf="+gdzherf, dataType : "json", success : function (data) { } }) } }) }; <div id="container" style="color: #FF0000;display: inline-block; width: 300px;height: 120px" > <div class="text">&nbsp;&nbsp;&nbsp;此<span class="sp">&nbsp;</span>页复印于我馆 </div> <div class="text"> <div class="qq"> 全宗<span id="FONDS_CODE" class="sp" style="display:block"></span> 目录<span id="CATALOGUE_NO" class="sp"></span> &nbsp;案卷 <span id="FOLDER_NO" class="sp"></span> 第<span id="PAGE_NO" class="sp"></span>页 </div> </div> <div class="text date"> 上海市xxxx档案证明专用章 </div> <div class="date"> <span id="year"></span>年<span id="month"></span>月<span id="day"></span>日 </div> </div> <a onclick="jietu()" class="easyui-linkbutton" style="width:80px">截图</a> ``` ## 产生的效果: ![前端效果](https://img-ask.csdn.net/upload/201904/29/1556503354_805590.png) 再次验证: ![再次去验证](https://img-ask.csdn.net/upload/201904/29/1556503399_168853.png) **结论:拿到前端获取的Base64数据去转换,与预期想的一致,没有问题** ## 4.现在用我的后台代码进行解码,图片与预期不符合 ``` public void download(HttpServletRequest request) throws IOException { String gdzherf = request.getParameter("gdzherf").replace("data:image/png;base64,",""); // Base64码 BASE64Decoder decoder = new BASE64Decoder(); byte[] bs = decoder.decodeBuffer(gdzherf);//解密 //生成到目标路径 for(int k=0;k<bs.length;++k) { if(bs[k]<0) {//调整异常数据 bs[k]+=256; } } String path = "C:\\Users\\Cc\\Desktop\\对比gc\\截图.png"; OutputStream out = out = new FileOutputStream(path); out.write(bs); out.flush(); out.close(); } ``` **下图是: 通过获取到的Base64 参数 下载的图片** ![图片说明](https://img-ask.csdn.net/upload/201904/29/1556503979_78757.png) ![打开结果](https://img-ask.csdn.net/upload/201904/29/1556503995_257195.png) 可以看出,**自己解码下载的文件,与前端截图的问题是不一致的**,我自己猜想是**参数传递参数问题**,我把**前端生成的Base64代码 拷贝到后台直接进行解码获取到的图片就是我想要的结果**, 问题应该就是出在传递参数过程中,不知各位有什么好的解决方法码?<br/> **下图是通过前端拷贝的Base64,在后台直接解码出来的图片**: ![图片说明](https://img-ask.csdn.net/upload/201904/29/1556504515_820700.png) 还请教各位如何处理这个Base64 参数问题,如果是因为其它问题,还请不吝赐教,谢谢各位 ------------------------------------- 现在本机自己的项目 获取的图片与前端生成的图片一致了。但是如果放到公司的项目中,则就出现了下面的情况,不知道原因是啥? 如图: ![图片说明](https://img-ask.csdn.net/upload/201904/29/1556522244_60398.png)

html5 canvas 绘制base64图片失败

``` <canvas id="canvas1" ...> <!--源//--> <canvas id="canvas2" ...> <!--目的//--> <img id="testImg" src=""> <!--测试//--> ``` 场景: 2个canvas;1个img canvas1显示内容,接着将内容复制到canvas2里面。 实现: var img = canvas1Context.toDataURL('image/jpeg'); img.replace(/^data:image\/(png|jpg);base64,/, ""); myTestImg.src = img;//显示成功! var imggg = new Image(); imggg.src = img; //img.length //7259 canvas2Context.drawImage(imggg, 0, 0, 320, 480); //黑底,无图像,无报错 //png格式是白底,同样无图像

canvers转化base64,然后后台解码生成图片问题

直接上代码了, ``` var img_this=new Image(); img_this.src=$('#preview').attr('src'); var width = img_this.width,height = img_this.height; var scale = width / height; width1 = 300; height1 = parseInt(width1 / scale); var canvas = $("#cans"); canvas[0].width = width1; canvas[0].height = height1; var cropStr =canvas[0].toDataURL("image/jpeg"); alert(cropStr); ``` 这是生成的base64的字符串, ``` public boolean strtoimg(String imgStr){ if (imgStr == null){ // 图像数据为空 return false; } BASE64Decoder decoder = new BASE64Decoder(); try { // Base64解码 byte[] bytes = decoder.decodeBuffer(imgStr); for (int i = 0; i < bytes.length; ++i) { if (bytes[i] < 0) {// 调整异常数据 bytes[i] += 256; } } // 生成jpeg图片 String path = "d:555.jpg"; OutputStream out = new FileOutputStream(path); out.write(bytes); out.flush(); out.close(); return true; } catch (Exception e) { return false; } } ``` 这个是生成图片方法,哪里有不对的吗?生成的图片是一片黑。 在线等~

用Js将图片转为base64字符串

如题,前台使用js将file表单选中的图片转换为base64字符串,请问该怎么做? ![图片说明](https://img-ask.csdn.net/upload/201507/20/1437355918_696515.jpg) 这是我在网上找的相关代码,使用firefox调试,每次运行到img.onload就退出去了,进不了function,不知道是哪里有问题,还是压根就写错了。请好心人指点,先谢谢了!

toDataURL怎么转换成成base64格式的gif图

canvas的toDataURL的方法只能保存img/png或者img/jpeg格式的,如果格式不对话默认转成img/png。如果我要把gif图转成base64码,应该怎么转才能不是只显示一帧。![图片说明](https://img-ask.csdn.net/upload/201801/02/1514894345_263350.png)![图片说明](https://img-ask.csdn.net/upload/201801/02/1514894438_354446.png)

html2canvas 生成canvas 后 转成图片报错

``` html2canvas($("#bodydiv"), { onrendered: function (canvas) { document.body.appendChild(canvas); convertCanvasToImage(document.getElementsByTagName("canvas")); } }); 生成后用 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } ``` 报 canvas.toDataURL is not a function 这个错 这个生成的canvas原本在页面里没有的 如果我直接写一个空的canvas 就能获取到 有么有道友遇到过

base64图片 能转成http或者https路径进行下载么

最近在做apicloud的项目,里面突然提示了只能通过http或者https下载 ![图片说明](https://community.apicloud.com/bbs/data/attachment/forum/201906/19/165609z5dpkp26a0a54gh4.jpg) 我是网站搭在服务器上,用apicloud包上个网站在里面,但是出现保存保存不了。 以下是我的服务器上关于下载的网站代码 ![图片说明](https://community.apicloud.com/bbs/data/attachment/forum/201906/19/165823ulpdr6dmvp6zpwbk.jpg) ![图片说明](https://community.apicloud.com/bbs/data/attachment/forum/201906/19/171124zbqhhbslggu0ll4k.png) data是个base64的内容 我想问的是怎么把这个base64 的图片通过http或者https的格式下载呢?? (难道要上传到服务器上,然后在服务器上本地下载?可是我又担心服务器容量的问题。。)

java 用Base64压缩图片后图片怎么越来越模糊啊?

我这里服务端只储存图片的16进制字符串。所以我要先把16进制的字符串转换成String,再转换成Drawable. 同理要是传送图片到服务端,也是一样,将Drawable转换成String,在转换成16进制字符串。最近发现,我对一张图片一直进行这些操作(16->string->Drawable->string->16->......) 图片会越来越模糊,最后图片就不能显示了,这些事我转换图片和字符串的代码: /** * 16进制字符串转换成String * * @param hexStr * @return */ public String hexStr2Str(String hexStr) { if (hexStr==null) return null; String str = "0123456789ABCDEF"; char[] hexs = hexStr.toCharArray(); byte[] bytes = new byte[hexStr.length() / 2]; int n; for (int i = 0; i < bytes.length; i++) { n = str.indexOf(hexs[2 * i]) * 16; n += str.indexOf(hexs[2 * i + 1]); bytes[i] = (byte) (n & 0xff); } return new String(bytes); } /** * String转换drawable * * @param icon * @return */ public Drawable byteToDrawable(String icon) { byte[] img = null; try { img = Base64.decode(icon.getBytes(), Base64.DEFAULT); }catch (Exception e){ } Bitmap bitmap; if (img != null) { bitmap = BitmapFactory.decodeByteArray(img, 0, img.length); @SuppressWarnings("deprecation") Drawable drawable = new BitmapDrawable(bitmap); return drawable; } return null; } /** * 图片转换成字符串 * * @param drawable * @return */ public String drawableToByte(Drawable drawable) { if (drawable != null) { Bitmap bitmap = Bitmap .createBitmap( drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565); Canvas canvas = new Canvas(bitmap); drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); drawable.draw(canvas); int size = bitmap.getWidth() * bitmap.getHeight() * 4; // 创建一个字节数组输出流,流的大小为size ByteArrayOutputStream baos = new ByteArrayOutputStream(size); // 设置位图的压缩格式,质量为100%,并放入字节数组输出流中 bitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos); // 将字节数组输出流转化为字节数组byte[] byte[] imagedata = baos.toByteArray(); String icon = Base64.encodeToString(imagedata, Base64.DEFAULT); return icon; } return null; } /** * 字符串转换成十六进制字符串 * * @param str * @return */ public String str2HexStr(String str) { char[] chars = "0123456789ABCDEF".toCharArray(); StringBuilder sb = new StringBuilder(""); byte[] bs = str.getBytes(); int bit; for (int i = 0; i < bs.length; i++) { bit = (bs[i] & 0x0f0) >> 4; sb.append(chars[bit]); bit = bs[i] & 0x0f; sb.append(chars[bit]); } return sb.toString(); } 这些代码都是网上copy的,也不晓得哪里有问题。

vbscript将图片转换为base64字符串

asp.net可以用 Convert.ToBase64String,javascript的canvas对象 vbscript怎么将图片转换为base64字符串呢。 asp可以直接使用的,有示例最好

当从base64数据字符串保存画布图像服务器端时,它会产生空白图像

<div class="post-text" itemprop="text"> <p>I have problem with saving canvas image in PHP. I get a blank <code>.png</code> file. I search a lot about this problem but cant find anything useful about this. Why does it save a blank image instead of rendering real image?</p> <p>JavaScript code: </p> <pre><code>html2canvas([document.getElementById('dadycool')], { onrendered: function (canvas) { var data = canvas.toDataURL(); var image = new Image(); image.src = data; document.getElementById('imagec').appendChild(image); console.log(data); $.ajax({ type: "POST", url: "up.php", data: { imgBase64: data } }).done(function(o) { console.log('saved'); }); } </code></pre> <p>PHP code: </p> <pre><code>&lt;?php // requires php5 define('localhost/samp/sample2/uploads', 'images/'); $img = $_POST['imgBase64']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file = localhost/samp/sample2/uploads . uniqid() . '.png'; $success = file_put_contents($file, $data); print $success ? $file : 'Unable to save the file.'; ?&gt; </code></pre> </div>

如何通过图片的像素列表转Base64

快应用内的canvas只能获取到如下信息 ImageData 对象 在快应用中 ImageData 对象是一个普通对象,其中存储着 canvas 对象真实的像素数据,它包含以下几个属性 width 使用像素描述 ImageData 的实际宽度 height 使用像素描述 ImageData 的实际高度 data Uint8ClampedArray 类型,描述了一个一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示 那么问题来了,怎么通过这个对象获取图片的base64信息?

在laravel php中将现有图像转换为base64

<div class="post-text" itemprop="text"> <p>I'm trying to show the user saved images in product edit page. I'll show the images which is uploaded by the user in add product. I'm trying to convert the image to base64 format to show it in background. </p> <p>when I use </p> <pre><code>file_get_contents </code></pre> <p>in my Controller it's gives me this error.</p> <pre><code>file_get_contents(full_path_to_image): failed to open stream: No such file or directory </code></pre> <p>My images is stored under "public/images/upload/FILE_NAME"</p> <p>is there any trick that I miss or something that I make wrong</p> </div>

在做验证码自动填写插件遇到了一些问题,在支付宝页面用canvas转换验证码图片到Base64报错

**我正在做一个验证码自动填写插件,但是我遇到了一个报错** 可以参考一下:[https://blog.csdn.net/u014602478/article/details/75095961](https://blog.csdn.net/u014602478/article/details/75095961 "https://blog.csdn.net/u014602478/article/details/75095961") ![报错](https://img-ask.csdn.net/upload/201902/03/1549128446_976961.png) 对应的代码段是: ![图片说明](https://img-ask.csdn.net/upload/201902/03/1549128473_324557.png) ```javascript function getBase64Image(im) { im.crossOrigin=""; var canvas = document.createElement("canvas"); canvas.width = im.width; canvas.height = im.height; var ctx = canvas.getContext("2d"); ctx.drawImage(im, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace("data:image/png;base64,", ""); } ``` 我在_百度_找了很多的解决方案,大多是告诉我这个是跨域报错 需要加入 ```javascript img.crossOrigin="Anonymous"; ``` 解决跨域问题,但是尝试之后还是报错 接下来我在_stackoverflow_上找了此类问题的解决方法 得到了,这个方案 ```javascript img.crossOrigin=""; ``` 添加之后还是报错 此解决方案在其他页面都是可行的,就是支付宝的页面死活不可以 **测试方法**: > > > **页面地址**:[点击这里跳转到支付宝登录页面](https://auth.alipay.com/login/index.htm "点击这里跳转到支付宝登录页面") > > **1.在Console中输入函数** > > 例如: > ```javascript > function getBase64Image(im) > { > im.crossOrigin=""; > var canvas = document.createElement("canvas"); > canvas.width = im.width; > canvas.height = im.height; > var ctx = canvas.getContext("2d"); > ctx.drawImage(im, 0, 0); > var dataURL = canvas.toDataURL("image/png"); > return dataURL.replace("data:image/png;base64,", ""); > } > ``` > **2.再输入** > ```javascript > getBase64Image(document.getElementById("J-checkcode-img")) > ``` > 无奈自己对前端不太懂,在网上找了很久也没有合适的解决方法,不知道该如何解决,还希望各位能够帮忙,谢谢!!

java后台将base64字符串转换为PDF后生成的PDF打不开怎么回事呀

![图片说明](https://img-ask.csdn.net/upload/201910/12/1570868633_161609.jpg) 后台代码: public static void base64StringToPdf(String base64Content,String filePath){ File file = new File(filePath);// 将原来参数修改为字符串 BASE64Decoder decoder = new BASE64Decoder(); BufferedInputStream bin = null; FileOutputStream fout = null; BufferedOutputStream bout = null; try { //将base64编码的字符串解码成字节数组 byte[] bytes = decoder.decodeBuffer(base64Content); //创建一个将bytes作为其缓冲区的ByteArrayInputStream对象 ByteArrayInputStream bais = new ByteArrayInputStream(bytes); //创建从底层输入流中读取数据的缓冲输入流对象 bin = new BufferedInputStream(bais); //创建到指定文件的输出流 fout = new FileOutputStream(file); //为文件输出流对接缓冲输出流对象 bout = new BufferedOutputStream(fout); byte[] buffers = new byte[1024]; int len = bin.read(buffers); while(len != -1){ bout.write(buffers, 0, len); len = bin.read(buffers); } //刷新此输出流并强制写出所有缓冲的输出字节,必须这行代码,否则有可能有问题 bout.flush(); } catch (IOException e) { e.printStackTrace(); } finally { try { bout.close(); fout.close(); bin.close(); } catch (IOException e) { e.printStackTrace(); } } } 前台是将页面展示的数据图标什么的生成PDF 前台代码: function downloadofpdf(){ var varname = $("#taskid").text(); if(confirm("您确认下载该PDF文件吗?")){ var target = document.getElementById("bodyid"); target.style.background = "#FFFFFF"; // if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate(); html2canvas(target, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth /1592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save(varname+".pdf"); // 将pdf输入为base格式的字符串 var buffer = pdf.output("datauristring"); // // 将base64格式的字符串转换为file文件 // var myfile = dataURLtoFile(buffer, varname); // var formdata = new FormData(); // formdata.append(name, myfile); $.post("/riskManage/uploadpdf",{data:JSON.stringify({formdata:buffer})},function(result){ //alert("hao"); }) //sc(); }, background: "#fff" }) } }

微信浏览器安卓机无法保存canvas转成img格式的图片

大家好,如何解决安卓机微信内置浏览器无法保存canvas转成img格式的图片 (长按图片,无法发送给朋友、保存到手机,甚至无法收藏)的问题,我有想过将canvas转成img格式的图片传回服务器端进行处理,保存再显示出来,但data:image/png;base64的长度太长了,没成功。 有什么可以解决这问题??

base64转image问题(java)

最近在后台得到byte数组流,转成string后看是base64编码: ![图片说明](https://img-ask.csdn.net/upload/201607/21/1469080699_466517.png) 然后这个base64应该怎么处理?目前想法是转成image存在本地,但是用百度的各种方法转image都失败。 今天看了网页的代码,是在js方法里用ajax请求把dataurl传过来,部分代码: ``` var canvas = document.getElementById("canvas"); var canvasData = canvas.toDataURL("image/jpeg"); /* canvasData = encodeURIComponent(encodeURIComponent(canvasData)); */ //此处提交您的手写签名数据canvasData console.info(canvasData); $.ajax({ type: 'POST', url: '/sign/getSign', data: { "userId":getUrlParam('userId'), "canvasData":canvasData, }, ``` 能不能直接传图片文件过来,而不是传dataurl

将html转成图片 手机端 下载base64 的图片下载失败?pc端正常什么原因?求解?

html代码部分 ``` <template> <div class="main"> <div> <div id="deaitl"> </div> </div> <a id="tt" ref="download" v-show="false" :href="downloadUrl" :download="downloadfilename"></a> </div> </template> ``` 脚本处理 ``` getPdf() { var vm=this; html2Canvas(document.querySelector("#deaitl"), { allowTaint: true }).then(function(canvas) { let contentWidth = canvas.width; let contentHeight = canvas.height; let leftHeight = contentHeight; let position = 0; let imgWidth = 595.28; let imgHeight = (592.28 / contentWidth) * contentHeight; let pageHeight = (contentWidth / 592.28) * 841.89; let pageData = canvas.toDataURL("image/jpeg", 1.0); //base64 vm.downLoadImage(pageData);//执行下载 }); }, downLoadImage (imgUrl) { this.downloadUrl = imgUrl this.downloadfilename = this.titlename; setTimeout(() => { //a 标签下载 this.$refs.download.click() }, 200) } ```

上传经过canvas处理的图片!!!

用canvas对图片进行压缩,然后用ajax post到后台,后台把图片放到本地的磁盘里,但是最后图片打开之后是空的,里面什么内容都没有。。请大神看看原因。 下面是我的关键部分的代码 ajax部分 ![图片说明](https://img-ask.csdn.net/upload/201508/13/1439396557_635176.jpg) php部分 ![图片说明](https://img-ask.csdn.net/upload/201508/13/1439396570_92938.jpg) 在php echo $img那里能返回图编的编码,如下 ![图片说明](https://img-ask.csdn.net/upload/201508/13/1439396581_451708.jpg) 经过base64_decode解码之后的$data全部都是这样的 ![图片说明](https://img-ask.csdn.net/upload/201508/13/1439396592_485342.jpg) 最后在E盘打开经过file_put_content处理的图片是一片空白

vue使用canvas做横屏手写签名功能,写完后确认生成png图片,但是无法将canvas旋转

本来打算横屏签完名,然后旋转,然后生成png图片。<br/> 但是做到旋转那一步就死了。 <br/> 在最后的**this.saveEl.addEventListener**方法里将canvas旋转 但是用了ctx.rotate 似乎没有用。。。。 求助啊求助 vue 代码 ``` <template> <div class="container"> <div class="sign-box"> <div id="canvas" ref="canvas"></div> <div class="button-box"> <div id="clearCanvas" ref="clearCanvas"> <p>清除</p> </div> <div id="saveCanvas" ref="saveCanvas"> <p>保存</p> </div> </div> </div> <div class="mySign" v-show="isSign"> <img :src="signSrc" alt /> </div> </div> </template> <script> export default { data() { return { isSign: false, signSrc: "" }; }, created() {}, mounted() { this.lineCanvas({ el: this.$refs.canvas, //绘制canvas的父级div clearEl: this.$refs.clearCanvas, //清除按钮 saveEl: this.$refs.saveCanvas //保存按钮 }); }, methods: { lineCanvas(obj) { for (var i in obj) { this[i] = obj[i]; } this.canvas = document.createElement("canvas"); this.el.appendChild(this.canvas); this.ctx = this.canvas.getContext("2d"); let size = { width: this.el.clientWidth, height: this.el.clientHeight }; this.canvas.width = size.width; this.canvas.height = size.height; this.ctx.fillStyle = "#fff"; this.ctx.fillRect(0, 0, size.width, size.height); this.ctx.strokeStyle = "#000"; //用绝对坐标来创建一条路径 this.ctx.beginPath(); //将这条线绘制到canvas上 this.ctx.stroke(); //只有调用stroke canvas 才会绘制图像显示结果 this.ctx.lineWidth = 2; this.ctx.lineCap = "round"; //开始绘制 this.canvas.addEventListener( "touchstart", function(e) { this.ctx.beginPath(); this.ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); }.bind(this), false ); //绘制中 this.canvas.addEventListener( "touchmove", function(e) { this.ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.ctx.stroke(); }.bind(this), false ); //结束绘制 // this.canvas.addEventListener( // "touchend", // function() { // this.ctx.closePath(); // // let imgBase64 = this.canvas.toDataURL(); // //console.log(imgBase64); // // this.signSrc= imgBase64; // // this.isSign = true; // }.bind(this), // false // ); // //清除画布 this.clearEl.addEventListener( "click", function() { this.ctx.clearRect(0, 0, size.width, size.height); }.bind(this), false ); //保存图片,直接转base64 this.saveEl.addEventListener( "click", function() { let imgBase64 = this.canvas.toDataURL(); this.signSrc = imgBase64; this.isSign = true; this.ctx.clearRect(0, 0, size.width, size.height); }.bind(this), false ); } } }; </script> <style scoped lang="less"> div.sign-box { display: flex; height: 100%; div.button-box { width: 20%; height: 100%; // border: 1px solid red; display: flex; flex-direction: column; justify-content: space-around; div { text-align: center; // border: 1px solid blue; height: 50%; overflow: hidden; p { line-height: 50vh; transform: rotate(90deg); } } } #canvas { width: 80%; height: 100%; position: relative; // background: bisque; canvas { display: block; } } } .mySign { width: 100%; border: 1px solid red; box-sizing: border-box; img { width: 100%; } } </style> ```

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

点沙成金:英特尔芯片制造全过程揭密

“亚马逊丛林里的蝴蝶扇动几下翅膀就可能引起两周后美国德州的一次飓风……” 这句人人皆知的话最初用来描述非线性系统中微小参数的变化所引起的系统极大变化。 而在更长的时间尺度内,我们所生活的这个世界就是这样一个异常复杂的非线性系统…… 水泥、穹顶、透视——关于时间与技艺的蝴蝶效应 公元前3000年,古埃及人将尼罗河中挖出的泥浆与纳特龙盐湖中的矿物盐混合,再掺入煅烧石灰石制成的石灰,由此得来了人...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

C++11:一些微小的变化(新的数据类型、template表达式内的空格、nullptr、std::nullptr_t)

本文介绍一些C++的两个新特性,它们虽然微小,但对你的编程十分重要 一、Template表达式内的空格 C++11标准之前建议在“在两个template表达式的闭符之间放一个空格”的要求已经过时了 例如: vector&lt;list&lt;int&gt; &gt;; //C++11之前 vector&lt;list&lt;int&gt;&gt;; //C++11 二、nullptr ...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

深入剖析Springboot启动原理的底层源码,再也不怕面试官问了!

大家现在应该都对Springboot很熟悉,但是你对他的启动原理了解吗?

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

【阿里P6面经】二本,curd两年,疯狂复习,拿下阿里offer

二本的读者,在老东家不断学习,最后逆袭

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

微软为一人收购一公司?破解索尼程序、写黑客小说,看他彪悍的程序人生!...

作者 | 伍杏玲出品 | CSDN(ID:CSDNnews)格子衬衫、常掉发、双肩包、修电脑、加班多……这些似乎成了大众给程序员的固定标签。近几年流行的“跨界风”开始刷新人们对程序员的...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

我说我懂多线程,面试官立马给我发了offer

不小心拿了几个offer,有点烦

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

立即提问
相关内容推荐