vue项目小积累
做了个vue小项目，项目问题积累，便于本人查阅。
vue项目的配置
// vue.config.js
// 在线配置文档： https://cli.vuejs.org/zh/config/#parallel
module.exports = {
// 选项...
publicPath: './', // 相对路径，如果css里面的资源链接、ajax请求链接也是相对路径，就可以部署到非根目录。
devServer: {
// open: process.platform === 'darwin', //是否自动新开chrome页面。
host: '0.0.0.0',
port: 8080, // CHANGE YOUR PORT HERE!
https: false,
hotOnly: false,
}
}
z-index 较全面的分析。parent 设置了 transform的时候，z-index无效。 但是可以设置translateZ，达到后置效果。
https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
Html2canvas （1.0.0-rc.5）的缺点：
1、截图无法显示box-shadow; 可以用::after来实现阴影。 最笨的办法是设置双div, 后面的div设置阴影色。
2、文字会有位移。在截图前修改padding-top上移， 截图后恢复。
3、图片不清。
a、 在截图前修改transform: scale(1)， 截图后恢复。
b、html2canvas可以设置放大的参数和分辨率。 https://stackoverflow.com/questions/22803825/html2canvas-generates-blurry-images
c、 png图片较混浊。可以在较大图片大小的情况下截图，在绘制到小的canvas上。ctx.imageSmoothingQuality 可以改变位图缩放后的平滑度，效果惊艳。
// 缩放成想要的比例
const w = 900;
const h = 383;
const elem = document.createElement('canvas');
elem.width = w;
elem.height = h;
const ctx = elem.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";
// console.log(canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0, w, h);
canvas = elem;4、svg图片无法正确显示。 将svg在线放大https://www.iloveimg.com/resize-image/resize-svg， 再在线转成png.
5、缩放元素的text-shadow有位移。 在截图前修改transform: scale(1) 或为空， 为正常的大小，不缩放， 截图后恢复。
Resize svg， svg在线方法地址：
https://www.iloveimg.com/resize-image/resize-svg
一个正确的css没有起作用，可能是前一个css有语法错误，干扰到了它。 比如多了“ ；”。
黏贴前，去除复制文字的样式
https://blog.csdn.net/zhang__ao/article/details/79107297
$(".page3-emjoy5").on("paste", function (e) {
textInit(e)
});
function textInit(e) {
e.preventDefault();
var text;
var clp = (e.originalEvent || e).clipboardData;
if (clp === undefined || clp === null) {
text = window.clipboardData.getData("text") || "";
if (text !== "") {
if (window.getSelection) {
var newNode = document.createElement("span");
newNode.innerHTML = text;
window.getSelection().getRangeAt(0).insertNode(newNode);
} else {
document.selection.createRange().pasteHTML(text);
}
}
} else {
text = clp.getData('text/plain') || "";
if (text !== "") {
document.execCommand('insertText', false, text);
}
}
}
nginx开端口，指向相关的服务。
https://blog.csdn.net/kongkonghuawei/article/details/88087585
如果通过设置border绘制各种三角形。Triangle
https://css-tricks.com/the-shapes-of-css/
Linux如何通过将一个命令设置成全局的命令。
ln -s /root/node-v12.16.2-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v12.16.2-linux-x64/bin/npm /usr/local/bin/npm
通过css全局变量设置主题。:root是根元素，可以在它下面设置css变量
:root {
—your-variable: red;
}
如何通过js修改变量的值：
document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR’);
上传图片代码：
uploadImage(obj) {
console.log(obj);
let that=this;
let file = obj.raw;
console.log(file.name);
if (!file.type.match('image.*')) { // 校验
return;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
$('#svgWrap').css('background', 'url(' + e.target.result + ') no-repeat center / cover’); // e.target.result 是核心字符串值。
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file); // dataURL
}
上传json代码
getUploadJSON (obj) {
let file = obj.raw;
let that = this;
// console.log(file.type);
if (!file.type.match('application/json')) {
alert('请上传保存的json文件');
return;
}
this.imageUploadCallback = function (result) {
// console.log(result);
let j;
// return;
try {
j = JSON.parse(result);
} catch (e) {
alert('不是正确的配置文件');
}
for (var key in j) {
that.$data[key] = j[key];
}
that.$forceUpdate();
that.changeTheme();
};
$('#getUploadJSON').trigger('click');
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
console.log(e);
if (that.imageUploadCallback) {
that.imageUploadCallback(e.target.result); // 核心 e.target.result
}
};
})(file);
// Read in the image file as a data URL.
reader.readAsText(file); //as text
}
Html2canvas 保存图片
svgToImage(){
let start = () => {
$('#svgWrap').css('transform', 'scale(1)');
$('#svgWrap .bgline').hide();
// 截图时文字偏下
$('.editable').each( function () {
let $this = $(this);
var paddingTop = +$(this).css('paddingTop').split('px')[0];
$(this).css('paddingTop', paddingTop - 10 + 'px');
});
};
let end = () => {
$('#svgWrap').css('transform', 'scale(.5)');
$('#svgWrap .bgline').show();
// scale(0.2837)
// 恢复修正
$('.editable').each(function () {
let $this = $(this);
var paddingTop = +$(this).css('paddingTop').split('px')[0];
$(this).css('paddingTop', paddingTop + 10 + 'px');
});
};
start();
html2canvas(document.querySelector("#svgWrap"), {
// scale: 4,
allowTaint: true,
useCORS: true
// foreignObjectRendering: true
}).then(canvas => {
// console.log('a')
// console.log(canvas);
// 缩放成想要的比例
const w = 900;
const h = 383;
const elem = document.createElement('canvas');
elem.width = w;
elem.height = h;
const ctx = elem.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";
// console.log(canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0, w, h);
canvas = elem;
var b64;
try {
b64 = canvas.toDataURL("image/png");
} catch (err) {
console.log(err);
end();
alert(err);
}
// console.log('b');
var a = document.createElement("a");
a.href = b64;
a.download = 'xinhua_poster.png'; //设定下载名称
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
a.dispatchEvent(evt);
end();
});
},
字符串保存json;
saveConfig(){
let $a = $('Download as Text File');
var text = JSON.stringify(this.$data, null, '\t');
var data = new Blob([text], {type: 'text/plain'});
var url = window.URL.createObjectURL(data);
$a[0].href = url;
$a[0].click();
},