用canvas标签getElementById为null

天,用了火狐和360都告诉我canvas是null,这种最简单的怎么还能娶不到啊,哪位大神解答一下
图片说明

4个回答

script放到canvas下面,要不js代码放到window.onload里面,放上面你的canvas都还没生成

把script和canvas的位置换换,canvas那一行放到上面去

加个window.onload

script和canvas的位置交换,有时候的确会有这种问题,还有就是你的body和head在哪

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js 'getContext' of null
Uncaught TypeError: Cannot read property 'getContext' of null 才接触js,网上搜了很久没找到有用的,为什么我这个图片加载不出来 ``` <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>哈哈哈哈哈</title> </head> <body> <canvas id="'myCanvas" width="200" height="400"style="border:1px solid #c3c3c3;"> </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var img = new Image(); img.onload = function(){ context.drawImage(img,0,0); }; img.src='uu.png'; </script> </body> </html> ```
vue中用html2canvas转换图片 图片不完整 或有偏移 有空白区域
``` html部分 <div style="height: 312px;overflow:hidden"> <div class="parter" id="parter" ref="parter"> <div class="qrcode" id="qrcode"></div> <p class="copywriting">{{changeText}}</p> </div> </div> ``` ``` js部分 html2canvas(document.getElementById('parter'), { width: 300, height: 300, backgroundColor: null, useCORS: true, // 允许图片跨域 taintTest: true, // 在渲染前测试图片 timeout: 500 // 加载延时 }).then(canvas => { canvas.toBlob((blob) => { saveAs(blob, '桌贴.png') }) }) ``` ![图片说明](https://img-ask.csdn.net/upload/201908/03/1564815559_206721.png) 导出的图片网上偏移
FabricJS 在mac机器上对Canvas调整大小屏幕会闪烁
``` 我的HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Ionic App</title> <!--script type="text/javascript" language='javascript' src="fabric.js"></script--> <script type="text/javascript" language='javascript' src="index.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #left { float: left; width: 20%; height: 100%; border: 0px solid red; padding: 0px; margin: 0px; } #center { float: left; width: 80%; height: 100%; border: 0px solid green; } #canvasWrapper { overflow: scroll; background: #FFFFFF; } #canvas{ border: 0px solid black; } </style> </head> <body id='body'> <div id='left'> <button onclick="init()">Init Canvas</button> <input type="file" onchange="chooseImage(event)"/><br/> <button onclick="zoomIn()">Zoom In</button> <button onclick="zoomOut()">Zoom Out</button><br/> </div> <div id='center'> <div id='canvasWrapper' tabIndex='0'> <canvas id="canvas" ></canvas> </div> </div> </body> </html> index.js代码: /*! index.js 使用FabricJS对钡条逻辑封装的*/ // 0 1 2 3 4 5 6 7 8 9 10 var zoomArray = [0.33, 0.4, 0.5, 0.66, 0.8, 1, 1.25, 1.5, 2, 2.5, 3]; //缩放的比例,都是对称的 var zoomIndex = 5; //当前的zoomIndex var canvasWrapper = null; //Canvas的包裹物,当外部的window大小变化时候需要对它的宽度和高度设置 var canvas = null; //Canvas var fCanvas = null; //中间的Fabric.Canvas var backgroundBase64 = null; var backgroundImage = null; //背景fabric.Image var backgroundImageWidth = 0 //Canvas的宽度,由图片的宽度决定 var backgroundImageHeight = 0; //Canvas的高度,由图片的高度决定 //Canvas的属性 var canvasAttrs = { imageSmoothingEnabled: false, enableRetinaScaling: false, stopContextMenu: true, //Menu禁用 fireLeftClick: true, //左按键启用 fireMiddleClick: true, //滚动键启用 fireRightClick: false, //右按键禁用 //selectionColor: '#CC00FF', //selection的颜色 selectionLineWidth: 2, //selection的线宽 selection: true, //selection启动 selectionBorderColor: '#FFFF00',//selection边框颜色 selectionFullyContained: true, //只有当selection全部包含Canvas.Object的时候才会被选中 selectionKey: 'ctrlKey' //使用ctrlKey进行多选 }; //图片属性,中间Canvas的背景图和坐下那个图 var imageAttrs = { left: 0, top: 0, selectable: false, //设置不能被选中,这样就可以作为背景图了 hoverCursor: "default", //设置它的鼠标形状 crossOrigin: 'Anonymous' }; /*! * OK选择文件 */ function chooseImage(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var imgBase64 = event.target.result; backgroundBase64 = imgBase64; //构造数据 var data = {}; var dataMap = {}; data['partitions'] = []; data['items'] = []; data['filters'] = {}; dataMap['data'] = data; dataMap["base64"] = backgroundBase64; loadData(dataMap); } reader.readAsDataURL(file) } /*! * OK这是上来执行的函数 */ function init() { __initFilterBackend(); __initCanvasWrapper(); __initCanvas(); } function loadData(dataMap) { if (dataMap == null) return; //图片的Base64编码。这个值肯定是有的 backgroundBase64 = dataMap['base64']; //加载背景图 fabric.util.loadImage(backgroundBase64, function(img) { //背景图 backgroundImage = new fabric.Image(img, imageAttrs); backgroundImageWidth = backgroundImage.width; backgroundImageHeight = backgroundImage.height; fCanvas.setWidth(backgroundImageWidth); fCanvas.setHeight(backgroundImageHeight); fCanvas.add(backgroundImage); }); } /*! * OK放大按钮触发 */ function zoomIn() { var oldZoom = zoomArray[zoomIndex]; ++zoomIndex; if (zoomIndex > (zoomArray.length - 1)) { zoomIndex = (zoomArray.length - 1); //直接return掉,因为zoomIndex > (zoomArray.length - 1)说明之前的zoomIndex已经是数组最后一个了 return; } __zoom(oldZoom); } /*! * OK缩小按钮触发 */ function zoomOut() { var oldZoom = zoomArray[zoomIndex]; --zoomIndex; if (zoomIndex < 0) { zoomIndex = 0; //直接return掉,因为zoomIndex < 0说明之前的zoomIndex已经是0了 return; } __zoom(oldZoom); } /*! * OK初始化Filter后端。使用Canvas2dFilterBackend,因为如果用new fabric.WebglFilterBackend()会报错 */ function __initFilterBackend() { fabric.filterBackend = new fabric.Canvas2dFilterBackend(); } /*! * OK初始化CanvasWrapper */ function __initCanvasWrapper() { //如果已经初始话好了就直接return if (canvasWrapper != null) return; var centerDiv = window.document.getElementById('center'); var width = centerDiv.offsetWidth; var height = centerDiv.offsetHeight; canvasWrapper = window.document.getElementById('canvasWrapper'); //这里通过style的width和height里设置加上px,并且这里我不设置style的maxWidth和maxHeight //因为如果设置了maxWidth和maxHeight后当我们对里面的Canvas进行缩小的时候,如果里面的Canvas变的太小,这样 canvasWrapper.style.width = width + 'px'; canvasWrapper.style.height = height + 'px'; } /*! * OK初始化Canvas */ function __initCanvas() { //如果已经初始化好了就直接return if (fCanvas != null) return; canvas = window.document.getElementById('canvas'); //这里不设置宽度和高度,通过导入图片的宽高来设置 fCanvas = new fabric.Canvas(canvas, canvasAttrs); //单纯设置canvas.backgroundColor内容无效,必须和下面的canvas.add一起才会起效果 fCanvas.backgroundColor = 'black'; } /*! * OK缩放的核心函数 */ function __zoom(oldZoom) { //记录一开始的left和top值 //var scrollLeft = canvasWrapper.scrollLeft; //var scrollTop = canvasWrapper.scrollTop; //以下是放大缩小操作,重新设置放大缩小的比例 var zoom = zoomArray[zoomIndex]; //在指定的点进行缩放 fCanvas.setZoom(zoom); //!Important,加入对Canvas大小的设置,这样可以让CanvasWrapper也能进行调整 fCanvas.setWidth(backgroundImageWidth*zoom); fCanvas.setHeight(backgroundImageHeight*zoom); //放大完后要重新设置transform //var vpt = fCanvas.viewportTransform; //console.log('-----' + vpt[4] + ' and ' + vpt[5]); //vpt[4] = 0; //vpt[5] = 0; //fCanvas.requestRenderAll(); /* oldleft newLeft * --------- = --------- * oldZoom newZoom */ //canvasWrapper.scrollLeft = (scrollLeft*zoom)/oldZoom; //canvasWrapper.scrollTop = (scrollTop*zoom)/oldZoom; } ```
canvas 截图,如何用下面这个函数得到图片数据。
var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var canvas = $("#" + canvasId); if (canvas.length == 0 && imageSource) { return; } function canvasMouseDown(e) { StopSelect(e); canvas.css("cursor", "default"); } function canvasMouseMove(e) { var canvasOffset = canvas.offset(); var pageX = e.pageX || event.targetTouches[0].pageX; var pageY = e.pageY || event.targetTouches[0].pageY; iMouseX = Math.floor(pageX - canvasOffset.left); iMouseY = Math.floor(pageY - canvasOffset.top); canvas.css("cursor", "default"); if (selectObj.bDragAll) { canvas.css("cursor", "move"); canvas.data("drag", true); var cx = iMouseX - selectObj.px; cx = cx < 0 ? 0 : cx; mx = ctx.canvas.width - selectObj.w; cx = cx > mx ? mx : cx; selectObj.x = cx; var cy = iMouseY - selectObj.py; cy = cy < 0 ? 0 : cy; my = ctx.canvas.height - selectObj.h; cy = cy > my ? my : cy; selectObj.y = cy; } for (var i = 0; i < 4; i++) { selectObj.bHow[i] = false; selectObj.iCSize[i] = selectObj.csize; } // hovering over resize cubes if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[0] = true; selectObj.iCSize[0] = selectObj.csizeh; } if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[1] = true; selectObj.iCSize[1] = selectObj.csizeh; } if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[2] = true; selectObj.iCSize[2] = selectObj.csizeh; } if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[3] = true; selectObj.iCSize[3] = selectObj.csizeh; } if (iMouseX > selectObj.x && iMouseX < selectObj.x + selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y + selectObj.h) { canvas.css("cursor", "move"); } // in case of dragging of resize cubes var iFW, iFH, iFX, iFY, mx, my; if (selectObj.bDrag[0]) { iFX = iMouseX - selectObj.px; iFY = iMouseY - selectObj.py; iFW = selectObj.w + selectObj.x - iFX; iFH = selectObj.h + selectObj.y - iFY; canvas.data("drag", true); } if (selectObj.bDrag[1]) { iFX = selectObj.x; iFY = iMouseY - selectObj.py; iFW = iMouseX - selectObj.px - iFX; iFH = selectObj.h + selectObj.y - iFY; canvas.data("drag", true); } if (selectObj.bDrag[2]) { iFX = selectObj.x; iFY = selectObj.y; iFW = iMouseX - selectObj.px - iFX; iFH = iMouseY - selectObj.py - iFY; canvas.data("drag", true); } if (selectObj.bDrag[3]) { iFX = iMouseX - selectObj.px; iFY = selectObj.y; iFW = selectObj.w + selectObj.x - iFX; iFH = iMouseY - selectObj.py - iFY; canvas.data("drag", true); } if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) { selectObj.w = iFW; selectObj.h = iFH; selectObj.x = iFX; selectObj.y = iFY; } drawScene(); } function canvasMouseOut() { $(canvas).trigger("mouseup"); } function canvasMouseUp() { selectObj.bDragAll = false; for (var i = 0; i < 4; i++) { selectObj.bDrag[i] = false; } canvas.css("cursor", "default"); canvas.data("select", { x: selectObj.x, y: selectObj.y, w: selectObj.w, h: selectObj.h }); selectObj.px = 0; selectObj.py = 0; } function Selection(x, y, w, h) { this.x = x; // initial positions this.y = y; this.w = w; // and size this.h = h; this.px = x; // extra variables to dragging calculations this.py = y; this.csize = 4; // resize cubes size this.csizeh = 6; // resize cubes size (on hover) this.bHow = [false, false, false, false]; // hover statuses this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes this.bDrag = [false, false, false, false]; // drag statuses this.bDragAll = false; // drag whole selection } Selection.prototype.draw = function () { ctx.strokeStyle = '#666'; ctx.lineWidth = 2; ctx.strokeRect(this.x, this.y, this.w, this.h); // draw part of original image if (this.w > 0 && this.h > 0) { ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h); } // draw resize cubes ctx.fillStyle = '#999'; ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2); ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2); ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2); ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2); }; var drawScene = function () { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas // draw source image ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); // and make it darker ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw selection selectObj.draw(); canvas.mousedown(canvasMouseDown); canvas.on("touchstart", canvasMouseDown); }; var createSelection = function (x, y, width, height) { var content = $("#imagePreview"); x = x || Math.ceil((content.width() - width) / 2); y = y || Math.ceil((content.height() - height) / 2); return new Selection(x, y, width, height); }; var ctx = canvas[0].getContext("2d"); var iMouseX = 1; var iMouseY = 1; var image = new Image(); image.onload = function () { selectObj = createSelection(x, y, width, height); canvas.data("select", { x: selectObj.x, y: selectObj.y, w: selectObj.w, h: selectObj.h }); drawScene(); }; image.src = imageSource; canvas.mousemove(canvasMouseMove); canvas.on("touchmove", canvasMouseMove); var StopSelect = function (e) { var canvasOffset = $(canvas).offset(); var pageX = e.pageX || event.targetTouches[0].pageX; var pageY = e.pageY || event.targetTouches[0].pageY; iMouseX = Math.floor(pageX - canvasOffset.left); iMouseY = Math.floor(pageY - canvasOffset.top); selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y; if (selectObj.bHow[0]) { selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y; } if (selectObj.bHow[1]) { selectObj.px = iMouseX - selectObj.x - selectObj.w; selectObj.py = iMouseY - selectObj.y; } if (selectObj.bHow[2]) { selectObj.px = iMouseX - selectObj.x - selectObj.w; selectObj.py = iMouseY - selectObj.y - selectObj.h; } if (selectObj.bHow[3]) { selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y - selectObj.h; } if (iMouseX > selectObj.x + selectObj.csizeh && iMouseX < selectObj.x + selectObj.w - selectObj.csizeh && iMouseY > selectObj.y + selectObj.csizeh && iMouseY < selectObj.y + selectObj.h - selectObj.csizeh) { selectObj.bDragAll = true; } for (var i = 0; i < 4; i++) { if (selectObj.bHow[i]) { selectObj.bDrag[i] = true; } } }; canvas.mouseout(canvasMouseOut); canvas.mouseup(canvasMouseUp); canvas.on("touchend", canvasMouseUp); this.getImageData = function (previewID) { var tmpCanvas = $("<canvas></canvas>")[0]; var tmpCtx = tmpCanvas.getContext("2d"); if (tmpCanvas && selectObj) { tmpCanvas.width = selectObj.w; tmpCanvas.height = selectObj.h; tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h); if (document.getElementById(previewID)) { document.getElementById(previewID).src = tmpCanvas.toDataURL(); document.getElementById(previewID).style.border = "1px solid #ccc"; } return tmpCanvas.toDataURL(); } }; }
怎么把js函数的参数变成全局变量,用到后面的函数中运算
通过函数计算得到gwp的数值,如果转化成全局变量值,用到后面的绘图函数中 ``` var gwp1=[]; $(function(){ var dom = document.getElementById("box4"); var myChart = echarts.init(dom); var app = {}; option = null; var y_f = []; //全局变量,wgid在gognweizongtu.js中获取 var gwp = 0; var xishu = [0.4,0.2,0.3,0.1]; var pjx = ["gzp","gyp","wlp","ryp"]; var pj = {"gongzhuang":"OK", "gongyi": "OK", "wuliao": "OK", "renyuan": "OK"}; var guige = [90, 90, 80, 75,85]; var xiang = ["gongzhuang","gongyi","wuliao","renyuan"]; for (var i = 0 ; i< xiang.length ; i++) { var lent = data[xiang[i]].y.length ; var ind = lent - 1 ; y_f.push(data[xiang[i]].y[ind]); if (data[xiang[i]].y[ind] < guige[i]){ pj[xiang[i]] = "NOK"; } document.getElementById(pjx[i]).innerHTML = pj[xiang[i]]; gwp += y_f[i]*xishu[i]; } y_f.push(88); if (gwp > 85.5){ document.getElementById("gwpj").innerHTML ="OK"; } gwp = gwp.toFixed(2); /*绘图代码省略*/ }; if (option && typeof option === "object") { myChart.setOption(option, true); } }) ``` 上部分代码得到gwp的数值,如何用到后面的画圆代码 darwPro("myCanvas",gwp/100);,画圆时老是提示gwp值为空 ``` <!-- 圆弧绘制--> //画圆方法 function drawArc(canvas,begin,end,color) { canvas.beginPath(); canvas.lineWidth = 6; canvas.fillStyle = "#ffffff"; canvas.strokeStyle = color; canvas.arc(48, 48, 40, begin,end); canvas.fill(); canvas.stroke(); canvas.closePath(); } //添加文字方法 function drawWord(canvas,text){ canvas.font = 'bold 20px arial'; canvas.fillStyle = 'red'; canvas.fillText(text, 30,53); } //每100毫秒画一次,300毫秒完成 function darwPro(id,rate){ //获取画布对象 var canvasID = document.getElementById("myCanvas"); var canvas = canvasID.getContext("2d"); window.alert(rate); //先画背景 drawArc(canvas,-0.5*Math.PI,1.5*Math.PI,"#EDEDED"); //setInterval()函数至少执行一次(当rate为零时直接返回) if(rate == 0){ return; } //为了体现动态图使用分段画图的策略 var begin = -0.5*Math.PI;//起始角度 var end = 2*Math.PI*rate-0.5*Math.PI;//结束角度 var add = 2*Math.PI*rate/10;//分段的增量 //分10次完成每次间隔50毫秒 var sid = setInterval(function(){ if(begin >= end){ clearInterval(sid); return;//此处必须return;因为即使clearInterval,函数仍然会执行一次导致比例不准确 } drawArc(canvas,begin, begin + add,"green"); //下次起始位置置为上次结束的位置 begin = begin + add; }, 50); //显示百分比的文字 drawWord(canvas,rate*100 + "%"); } darwPro("myCanvas",gwp/100); ```
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" }) } }
#Leaflet#用Chart.js在JavaScript生成的canvas里面绘制饼图 获取ElementID后出错
一个基于Leaflet开发的小小小项目 问题大概只这样的: 首先是我用L.control()生成一个控件(info),通过.update()方法对控件进行更新。在.update()中我创建了一个新的canvas元素,之后通过document.getElementById()获取该元素,并使用Chart.js库创建一个饼图。在调用Chart.js库的时候就报错了(TypeError: item is null)。 ``` 相关资源: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script> <style> #map{ height: 70% } .info { padding: 16px 10px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: 'white'; } </style> ``` 报错内容如下: TypeError: item is nullChart.bundle.js:6904:14 acquireContext https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:6904 construct https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:8423 Chart https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:8410 update http://127.0.0.1:5500/static/js/load_tiff.js:85 onAdd http://127.0.0.1:5500/static/js/load_tiff.js:76 addTo http://127.0.0.1:5500/static/js/leaflet/leaflet.js:5 <anonymous> http://127.0.0.1:5500/static/js/load_tiff.js:90 ``` 相关代码如下: var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var config = { type: 'pie', data: { datasets: [{ data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), ], backgroundColor: [ "rgba(230, 14, 14, 1)", "rgba(230, 122, 14, 1)", "rgba(230, 230, 14, 1)", "rgba(122, 230, 14, 1)", "rgba(14, 122, 230, 1)", ], label: 'Dataset 1' }], labels: [ 'Red', 'Orange', 'Yellow', 'Green', 'Blue' ] }, options: { responsive: true } }; var info = L.control(); info.onAdd = function(mymap) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function() { var content = '<h4>Statistic Info</h4>' + '<br />'; content += '<canvas id="myChart" width="10" height="10"></canvas>'; this._div.innerHTML = content; var piechart = new Chart(document.getElementById('myChart'),config) }; info.addTo(mymap); ```
关于ajax传值失败的问题
这是前端代码 ``` <body> <div class="booth"> <video id="video" width="400" height="300"></video> <input id='tack' type="button" value="拍照"> <canvas id='canvas' width='400' height='300'></canvas> <img id='img' src=''> <input type="button" onclick="uploadImage();" value="上传"> </div> <script> var video = document.getElementById('video'), canvas = document.getElementById('canvas'), snap = document.getElementById('tack'), img = document.getElementById('img'), vendorUrl = window.URL || window.webkitURL; //媒体对象 navigator.getMedia = navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia({ video: true, //使用摄像头对象 audio: false //不适用音频 }, function(strem){ console.log(strem); video.src = vendorUrl.createObjectURL(strem); video.play(); }, function(error) { //error.code console.log(error); }); snap.addEventListener('click', function(){ //绘制canvas图形 canvas.getContext('2d').drawImage(video, 0, 0, 400, 300); //把canvas图像转为img图片 img = canvas.toDataURL("image/png"); }); function uploadImage(){ $.ajax({ type:'post', url:'UploadImage', data:{image:img}, async:false, datatype:'json', success:function(data){ if(data.success){ alret('上传成功'); }else{ alret('上传失败'); } }, error:function(err){ alert('网络故障'); } }); } ``` 这是后台代码 ![图片说明](https://img-ask.csdn.net/upload/201806/06/1528275434_398160.png) 我想用ajax把“img=canvas.toDataURL("image/png")”的数据传回后台UploadImage,可是后台打印出来的一直是null,想请问代码应该怎么修改? 如果用<from>来传,<input>应该怎么写
前端的有关IE兼容性的问题(图片的下载)
通过canvas画图, 然后生成图片,方式如下: var myc = document.getElementById("myCanvas"); var ctx=myc.getContext("2d"); var image = new Image(); ctx.clearRect(0,0,800,800);//清空一波画布 ctx.drawImage(一些参数);//画一张图片 image.src = myc.toDataURL("image/png");//生成这张图片,并将格式设定为png (生成这里貌似就出了问题,在火狐,谷歌之类的浏览器,进行了这一步之后是可以再图片上右击,然后进行图片的存储的,可是IE不行,IE的图片另存为那一栏是灰色的) 最后进行下载到本地, var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; // 加工image data,替换mime type imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * 在本地进行文件保存 * @param {String} data 要保存到本地的图片数据 * @param {String} filename 文件名 */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; // 下载后的问题名 var filename = 'baidufe_' + (new Date()).getTime() + '.' + type; // download saveFile(imgData,filename); 然而这段代码就是在IE里面运行不了,火狐,谷歌之类都试过都可以正常运行,正常生成图片,并进行下载。 然后我在网上找了这么一段代码: var imgURL = img.src; var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete"; ) { if (oPop.document.readyState == "complete")break; } oPop.document.execCommand("SaveAs"); oPop.close(); 我发现当图片的路径地址URL确定的时候,就是说页面中的图片确实存在,且有真实路径的情况下是可以进行下载的(在IE下),但是在我用canvas画图画出来的图片再来进行存储的时候for(; oPop.document.readyState != "complete"; )这一行代码报错,报的错意思就是oPop不可为null之类的空值,原错是:无法获取未定义或 null 引用的属性“document”。 求各位大神帮忙看看吧,实在是没招儿了。
HTML5中的数据储存利用sessionStorage
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../canvas绘制圆形/jquery-1.2.6.min.js"></script> <script type="text/javascript"> function saveStorage(id) { alert(123); var target=document.getElementById(id); var str=target.value; sesstionStorage.setArray("mess","str"); } </script> </head> <body> <h1>Web Stroage数据存储</h1> <input type="text" id="input" > <input type="button" value="保存" onclick="saveStorage(input);"> <input type="button" value="读取" onclick="loadStorage(msg)"> </body> </html> 当在输入框里输入数据并点击保存时出现Uncaught TypeError: Cannot read property 'value' of null怎么解决这个问题
获取的图片地址乱码解决,但是保存的图片乱码怎么解决?在线等,求大神,解决,速结贴
package com.togest.emis.modules.resource.web; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.codec.binary.Base64; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.togest.emis.framework.utils.EncodeUtils; /** * * * @author mmk * */ @Controller public class PsaveController { @RequestMapping(value="save",method = RequestMethod.POST) public void save(Map<String,Object> map,HttpServletRequest request,HttpServletResponse response) throws IOException{ String imageData2 = request.getParameter("imageData2"); String file_path = request.getParameter("file_path"); file_path = URLDecoder.decode(file_path , "utf-8"); System.out.println("++++++++++++++++"+file_path); //String f = new String(request.getParameter("file_path").getBytes("ISO-8859-1"),"UTF-8"); //System.out.println("+++++++++++++++++"+f); String file_name = request.getParameter("file_name"); String Path = request.getSession().getServletContext().getRealPath("/"); String filePath2 = file_path.substring(0, 34); String filePath=file_path.replace(filePath2,Path); filePath =EncodeUtils.isoDecode(filePath); String fileName=file_name; File file = new File(filePath); System.out.println("+++++++"+filePath); //System.out.println("+++++++++"+EncodeUtils.isoDecode(filePath)); if(imageData2!=null){ try{ FileOutputStream write = new FileOutputStream(file); byte[] decoderBytes = Base64.decodeBase64(imageData2.replace("data:image/png;base64,","")); imageData2 = imageData2.replace("base64,",""); write.write(decoderBytes); write.flush(); write.close(); }catch(Exception e){ e.printStackTrace(); } } } } 保存控制器代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!-- jQuery --> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/jquery.ui.core.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/jquery.ui.widget.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/jquery.ui.mouse.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/jquery.ui.draggable.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/jquery.base64.js"></script> <!-- wColorPicker --> <link rel="Stylesheet" type="text/css" href="${pageContext.request.contextPath}/system/css/wColorPicker.css" /> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/wColorPicker.js"></script> <!-- wPaint --> <link rel="Stylesheet" type="text/css" href="${pageContext.request.contextPath}/system/css/wPaint.css" /> <script type="text/javascript" src="${pageContext.request.contextPath}/system/js/wPaint.js"></script> </head> <body> <!-- <img id="canvasImage3" onload="DrawImage(this)" style="display:none" src="${requestScope.filePath}" name="${requestScope.fileName}" />--> <img id="canvasImage3" onload="DrawImage(this)" style="display:none" /> <table id="full"> <tr> <td> <div id="wPaint2" style="position:relative; width:1620px;height:1200px;background:#CACACA; border:solid black 1px;"> </div> </td> <!-- <td><img id="canvasImage2" src=""/></td>--> </tr> <tr> <td colspan="2"> <div> <div id="box"></div> <input type="button" value="保存" onClick="saveImage2()" onblur="saveImage2()" /> <input type="button" value="提交" onblur="saveImage2()" onclick="saveImage2()"> <input type="button" value="全屏" onclick="full_screen()"> </div> <br /> </td> </tr> </table> <br /> <br /> <script type="text/javascript"> $(document).ready(function() { //alert('${filePath}'); ///alert('${ctx}/fileupload/download_file_url?fileDir=${filePath}'); $('#canvasImage3').attr('src','${ctx}/fileupload/download_file_url?fileDir=${filePath}'); }); function saveImage2() { var imageData2 = $("#wPaint2").wPaint("image");//获取wPaint的image属性值可获取base64格式的图片数据 var file_path = encodeURI(document.getElementById("canvasImage3").src);//这个获取乱码 file_path = encodeURI(file_path); var file_name = document.getElementById("canvasImage3").name; alert(file_path); $.ajax({ url : '${ctx}/save', type : 'post', data : { imageData2 : imageData2, file_path : file_path, file_name : file_name }, dataType : "json", success : function(result) { alert(result); if ("ture" == $.trim(result)) { $("#box").html("保存成功"); } else { $("#box").html("保存失败"); } }, error : function() { $("#box").html("保存成功"); } }); //$("#canvasImage2").attr('src', imageData2); } function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } var flag = false; //控制小图 function DrawImage(ImgD) { var image = new Image(); image.src = ImgD.src; if (image.width > 1620 || image.height > 1200) { image.width = 1620; image.height = 1200; } $("#wPaint2").css({ width : image.width, height : image.height }); $("#wPaint2").wPaint({ menuOrientation : 'vertical', imageBg : image.src }); } function full_screen() { var full = document.getElementById("full"); requestFullScreen(full); } function requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </body> </html> 编辑页面如下
这段js代码不知道为什么经常绘制失败
<style>#cs{border:black solid 1px;}</style> <canvas id=cs width=800 height=800></canvas> <script> var pokers;//5个牌数组 var btns; var panel0;//发牌方位置 var panel1;//左方位置 var panel2;//游戏者位置 var panel3;//右方位置 var panel4;//牌堆位置 var DealerNum=1;//操作者序号 var DealingNum=0; var T; </script> <script> betweenNum=function(a,b){ return Math.round(a+Math.random()*(b-a)); } </script> <script> var can=document.getElementById("cs"); var ctx=can.getContext("2d"); </script> <script> poker=function(id,num,power,str,color){ this.id=id;this.num=num;this.power=power; this.str=str;this.color=color; } //*必须有赋值 poker.prototype={ constructor:poker ,id:0 ,num:0 ,power:0 ,str:null ,color:null ,x:2 ,y:2 ,width:100 ,height:140 ,isSelect:false ,isHide:false ,draw:function(ctx){ if(this.isHide){ ctx.fillStyle="#a1a1e1"; ctx.fillRect(this.x,this.y,this.width,this.height); ctx.fillStyle=this.color; ctx.beginPath(); ctx.moveTo(this.x+2,this.y+2); ctx.lineTo(this.x+2,this.y+this.height-2); ctx.lineTo(this.x+this.width-2,this.y+2); ctx.lineTo(this.x+this.width-2,this.y+this.height-2); ctx.lineTo(this.x+2,this.y+2); ctx.closePath(); ctx.stroke(); } else{ ctx.fillStyle="#e1e1e1"; ctx.fillRect(this.x,this.y,this.width,this.height); ctx.fillStyle=this.color; ctx.font="20px Arial"; if(this.num){ctx.fillText(""+this.num,this.x+6,this.y+21);} ctx.fillText(this.str.charAt(0),this.x+3,this.y+45); ctx.fillText(this.str.charAt(1),this.x+3,this.y+65); } ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineTo(this.x,this.y+this.height); ctx.lineTo(this.x+this.width,this.y+this.height); ctx.lineTo(this.x+this.width,this.y); ctx.lineTo(this.x,this.y); ctx.closePath(); ctx.stroke(); } } </script> <script> initpoker=function(){ pokers=[]; for(j=0;j<5;j++)pokers[j]=[]; pokers[0][0]=new poker(1,null,17,"大王","red"); pokers[0][1]=new poker(2,null,16,"小王","black"); for(i=1;i<53;i++){ id=i+2; if(i<14){num=i;str="黑桃";color="black"} if(i>=14&&i<27){num=i-13;str="红桃";color="red"} if(i>=27&&i<40){num=i-26;str="梅花";color="black"} if(i>=40){num=i-39;str="方片";color="red"} power=num; if(power<3)power=power+13; pokers[0][i+1]=new poker(id,num,power,str,color);/* if(pokers[0][i+1].num=1)pokers[0][i+1].power=14; if(pokers[0][i+1].num=2)pokers[0][i+1].power=15;*/ } } </script> <script> Panel=function(x,y,w,h){ this.x=x;this.y=y; this.width=w; this.height=h; } Panel.prototype={ constructor:Panel ,x:0 ,y:0 ,width:0 ,height:0 ,pokers:0 ,isX:true ,distance:6 ,isHide:false ,draw:function(ctx){ il=this.pokers.length*this.distance; for(i=0;i<this.pokers.length;i++){ if(this.isX){ this.pokers[i].x=this.x+(this.width-il-100)/2+i*this.distance; this.pokers[i].y=this.y+22; if(this.pokers[i].isSelect)this.pokers[i].y=this.y+22-20; }else{ this.pokers[i].x=this.x+24; this.pokers[i].y=this.y+(this.height-il-140)/2+i*this.distance; } this.pokers[i].isHide=this.isHide; this.pokers[i].draw(ctx); } return true; } ,_draw:function(ctx){ //扑克宽100 il=(this.width-100*this.pokers.length)/(this.pokers.length+1); for(i=0;i<this.pokers.length;i++){ this.pokers[i].x=il*i+this.x; this.pokers[i].y=22+this.y; this.pokers[i].draw(ctx); } } } panel0=new Panel(150,0,500,190); panel1=new Panel(0,200,150,400); panel2=new Panel(0,600,800,190); panel3=new Panel(650,200,150,400); panel4=new Panel(150,300,500,190); panel0.isX=true; panel2.isX=true; panel4.isX=true; panel1.isX=false; panel3.isX=false; panel2.distance=20; </script> <script> btn=function(x,y,str,fn){ this.x=x;this.y=y; this.str=str; this.onclick=fn; } btn.prototype={ constructor:btn ,x:0 ,y:0 ,width:150 ,height:50 ,fontSize:20 ,theFont:null ,str:"按钮" ,onclick:null } </script> <script> drawall=function(ctx){ ctx.clearRect(0,0,can.width,can.height); panel0.pokers=pokers[0]; panel1.pokers=pokers[1]; panel2.pokers=pokers[2]; panel3.pokers=pokers[3]; panel4.pokers=pokers[4]; panel0.draw(ctx)&&panel1.draw(ctx)&&panel2.draw(ctx)&&panel3.draw(ctx)&&panel4.draw(ctx); return true; oo=function(){ } } </script> <script> dda=function(){ alert("hh");} dealing=function(){ clearTimeout(T); if(pokers[0].length==3)return; //alert(pokers[0].length); if(DealerNum>3)DealerNum=1; r=betweenNum(0,pokers[0].length); pokers[DealerNum].splice(pokers[DealerNum].length,0,pokers[0][r]); pokers[0].splice(r,1); DealerNum++; //alert(pokers[DealerNum].length); while(!drawall(ctx)){};T=setTimeout(dealing,50); } </script> <script> initpoker(); dealing(); </script>
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
小白学 Python 爬虫(25):爬取股票信息
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学 Python 爬虫(4):前置准备(三)Docker基础入门 小白学 Python 爬虫(5):前置准备(四)数据库基础 小白学 Python 爬虫(6):前置准备(...
卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!
作者 | Rocky0429 来源 | Python空间 大家好,我是 Rocky0429,一个喜欢在网上收集各种资源的蒟蒻… 网上资源眼花缭乱,下载的方式也同样千奇百怪,比如 BT 下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的 x 雷和某度网盘成了我经常使用的工具。 作为一个没有钱的穷鬼,某度网盘几十 kb 的下载速度让我...
世界上最牛的网络设备,价格低廉,其貌不扬......
夜深人静,电视和电脑都已经关机休息,但是我还在默默工作,我安静地趴在你家中的某个地方,7*24小时不眠不休,任劳任怨,目的只有一个,能让你舒服地躺在床上,畅快地刷手机!没错,这就是我,...
《面试宝典》2019年springmvc面试高频题(java)
前言 2019即将过去,伴随我们即将迎来的又是新的一年,过完春节,马上又要迎来新的金三银四面试季。那么,作为程序猿的你,是否真的有所准备的呢,亦或是安于本职工作,继续做好手头上的事情。 当然,不论选择如何,假如你真的准备在之后的金三银四跳槽的话,那么作为一个Java工程师,就不可不看了。如何在几个月的时间里,快速的为即将到来的面试进行充分的准备呢? 1、什么是Spring MVC ?简单...
一名大专同学的四个问题
【前言】   收到一封来信,赶上各种事情拖了几日,利用今天要放下工作的时机,做个回复。   2020年到了,就以这一封信,作为开年标志吧。 【正文】   您好,我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。   先说一下我的基本情况,高考失利,不想复读,来到广州一所大专读计算机应用技术专业。学校是偏艺术类的,计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
python爬取百部电影数据,我分析出了一个残酷的真相
2019年就这么匆匆过去了,就在前几天国家电影局发布了2019年中国电影市场数据,数据显示去年总票房为642.66亿元,同比增长5.4%;国产电影总票房411.75亿元,同比增长8.65%,市场占比 64.07%;城市院线观影人次17.27亿,同比增长0.64%。 看上去似乎是一片大好对不对?不过作为一名严谨求实的数据分析师,我从官方数据中看出了一点端倪:国产票房增幅都已经高达8.65%了,为什...
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试一个ArrayList我都能跟面试官扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
2020年1月中国编程语言排行榜,python是2019增长最快编程语言
编程语言比例 排名 编程语言 最低工资 工资中位数 最低工资 最高工资 人头 人头百分比 1 rust 20713 17500 5042 46250 480 0.14% 2 typescript 18503 22500 6000 30000 1821 0.52% 3 lua 18150 17500 5250 35000 2956 0.84% 4 go 17989 16...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
Idea 中最常用的10款插件(提高开发效率),一定要学会使用!
学习使用一些插件,可以提高开发效率。对于我们开发人员很有帮助。这篇博客介绍了开发中使用的插件。
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
工作十年的数据分析师被炒,没有方向,你根本躲不过中年危机
2020年刚刚开始,就意味着离职潮高峰的到来,我身边就有不少人拿着年终奖离职了,而最让我感到意外的,是一位工作十年的数据分析师也离职了,不同于别人的主动辞职,他是被公司炒掉的。 很多人都说数据分析是个好饭碗,工作不累薪资高、入门简单又好学。然而今年34的他,却真正尝到了中年危机的滋味,平时也有不少人都会私信问我: 数据分析师也有中年危机吗?跟程序员一样是吃青春饭的吗?该怎么保证自己不被公司淘汰...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
那些年,我们信了课本里的那些鬼话
教材永远都是有错误的,从小学到大学,我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里,有很多是错误文章,或者说是假课文。像《斑羚飞渡》: 随着镰刀头羊的那声吼叫,整个斑羚群迅速分成两拨,老年斑羚为一拨,年轻斑羚为一拨。 就在这时,我看见,从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声,一只半大的斑羚应声走了出来。一老一少走到伤心崖,后退了几步,突...
一文带你看清 HTTP 所有概念
上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性。我们接着上篇文章没有说完的 HTTP 标头继续来介绍(此篇文章会介绍所有标头的概念,但没有深入底层) HTTP 标头 先来回顾一下 HTTP1.1 标头都有哪几种 HTTP 1.1 的标头主要分为四种,通用标头、实体标头、请求标头、响应标头,现在我们来对这几种标头进行介绍 通用...
一个程序在计算机中是如何运行的?超级干货!!!
强烈声明:本文很干,请自备茶水!???? 开门见山,咱不说废话! 你有没有想过,你写的程序,是如何在计算机中运行的吗?比如我们搞Java的,肯定写过这段代码 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } ...
【蘑菇街技术部年会】程序员与女神共舞,鼻血再次没止住。(文末内推)
蘑菇街技术部的年会,别开生面,一样全是美女。
那个在阿里养猪的工程师,5年了……
简介: 在阿里,走过1825天,没有趴下,依旧斗志满满,被称为“五年陈”。他们会被授予一枚戒指,过程就叫做“授戒仪式”。今天,咱们听听阿里的那些“五年陈”们的故事。 下一个五年,猪圈见! 我就是那个在养猪场里敲代码的工程师,一年多前我和20位工程师去了四川的猪场,出发前总架构师慷慨激昂的说:同学们,中国的养猪产业将因为我们而改变。但到了猪场,发现根本不是那么回事:要个WIFI,没有;...
为什么程序猿都不愿意去外包?
分享外包的组织架构,盈利模式,亲身经历,以及根据一些外包朋友的反馈,写了这篇文章 ,希望对正在找工作的老铁有所帮助
Java校招入职华为,半年后我跑路了
何来 我,一个双非本科弟弟,有幸在 19 届的秋招中得到前东家华为(以下简称 hw)的赏识,当时秋招签订就业协议,说是入了某 java bg,之后一系列组织架构调整原因等等让人无法理解的神操作,最终毕业前夕,被通知调往其他 bg 做嵌入式开发(纯 C 语言)。 由于已至于校招末尾,之前拿到的其他 offer 又无法再收回,一时感到无力回天,只得默默接受。 毕业后,直接入职开始了嵌入式苦旅,由于从未...
世界上有哪些代码量很少,但很牛逼很经典的算法或项目案例?
点击上方蓝字设为星标下面开始今天的学习~今天分享四个代码量很少,但很牛逼很经典的算法或项目案例。1、no code 项目地址:https://github.com/kelseyhight...
立即提问