当我更改画布大小时,我注意到参数“mozImageSmoothingEnabled”正在被重置。
HTML
<canvas id='canv'>Your browser don't support canvas.</canvas>
Run Code Online (Sandbox Code Playgroud)
Javascript
var cnv = document.getElementById('canv');
var ctx = cnv.getContext('2d');
console.log(ctx.mozImageSmoothingEnabled); // default 'true'
ctx.mozImageSmoothingEnabled = false;
console.log(ctx.mozImageSmoothingEnabled); // shows 'false'
cnv.width = 100;
console.log(ctx.mozImageSmoothingEnabled); // shows 'true'
Run Code Online (Sandbox Code Playgroud)
JSFiddle:https ://jsfiddle.net/epvtuz37/
这是一个错误,还是预期的行为?
我正在使用 createImageBitmap() 创建一个ImageBitmap文件。
如何将此文件转换为 blob 或理想情况下的 PNG,以便我可以上传?
昨天用 HTML canvas 回到了我的爱好,并尝试在单独的线程中进行渲染,只是在控制台中遇到以下错误:
未捕获的 DOMException:无法在“Worker”上执行“postMessage”:无法克隆 OffscreenCanvas,因为它已分离。在主要(http://localhost:8000/responsivetemplate/:47:14)
[索引.html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="UTF-8" />
<title>OffscreenCanvas</title>
</head>
<body>
<div id='wrapper'>
<div id='content'>
<canvas id="testcanvas" width="512" height="512"></canvas>
</div>
</div>
</body>
<script>
'use strict';
document.body.onload = function () {
var canvas = document.getElementById('testcanvas');
canvas.imageSmoothingEnabled = false;
const …Run Code Online (Sandbox Code Playgroud) FileReader我有一个网络应用程序,它通过API 的方法对大文本文件(> 500mb)进行一些处理readAsText()。
多年来它一直运行良好,但突然我得到了空响应:event.target.result是一个空字符串。
369MB 可以工作,但 589MB 不行。
我在多台电脑上测试过;结果相同,但它在 Firefox 中确实有效。Chrome 肯定在最近的更新中引入了这一点。
这个bug已经提交了吗?
有什么解决方法吗?
我正在尝试将参数传递给 svg,但我没有做错什么,你能帮我一下吗?
链接:codesandbox
网页:
<object type="image/svg+xml" data="button.svg?color=yellow">
<param name="color" value="red" />
<param name="label" value="stop" />
</object>
Run Code Online (Sandbox Code Playgroud)
图像:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="param(color) blue"
stroke="navy"
/>
<text id="button_label" x="55" y="30" text-anchor="middle"
font-size="25" fill="white" font-family="Verdana"
content-value="param(label)">
Ok
</text>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud) 使用文件系统访问 API,我将如何访问所选目录的文件夹中包含的文件?
document.querySelector('button').addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
if (entry.kind === "file"){
const file = await entry.getFile();
const text = await file.text();
console.log(text);
}
if (entry.kind === "directory"){
/* for file in this directory do something */
}
}
});Run Code Online (Sandbox Code Playgroud)
<button>Choose Directory</button>Run Code Online (Sandbox Code Playgroud)
我正在使用enumerateDevices(请参阅此处的参考)来获取用户的摄像头和麦克风列表。
此代码在 Chrome 上运行良好:
$(document).ready(function(){
navigator.mediaDevices.enumerateDevices()
.then(gotDevices)
});
Run Code Online (Sandbox Code Playgroud)
但是由于它在 IE 上不受支持,因此会引发错误:
无法获取未定义或空引用的属性“enumerateDevices”
我的问题:是否有任何替代方法可以在所有浏览器中使用?
javascript internet-explorer getusermedia mediastream enumerate-devices
是否可以清理受污染的帆布?
我有一个Openlayers地图,用户可以在其中添加具有CORS限制的图层.我不能通过我的代理配置绕过cors并且crossOrigin ='anonymus'不是一个选项.
我需要的是能够移除" 坏 "图层并让用户生成地图图像.
所以我试着:
但我总是得到cors错误.如何在不刷新浏览器的情况下再次使我的地图变得更好?
每当我querySelectorAll在 Microsoft Edge 中使用:scope伪选择器时,控制台中都会出现此错误
SCRIPT5022: SCRIPT5022:语法错误
我想知道是否有替代方案querySelectorAll,我在其中使用此参数::scope > * > table。我不想为此使用 jQuery。谢谢。
我还想补充一下querySelector它本身就有效
好的,这是代码示例:
function pJSON(panel) {
var json = {tables: [], images: [], text: ""};
var tables = Array.from(panel.querySelectorAll(":scope > * > table"));
var images = Array.from(panel.querySelectorAll(":scope > * > img"));
var text = panel.querySelector(":scope > textarea");
tables.forEach(table => {
json["tables"].push(tJSON(table));
});
images.forEach(image => {
json["images"].push(image.outerHTML);
});
if (text) {
json["text"] = text.value;
}
return json;
}
Run Code Online (Sandbox Code Playgroud)
我要再次指出,它适用于除 …
我试图让 Web Worker 管理其状态,同时服务多个异步请求。
工人.ts 文件
let a =0; //this is my worker's state
let worker=self as unknown as Worker;
worker.onmessage =(e)=>{
console.log("Rec msg", e.data);
if(e.data === "+1"){
setTimeout(()=>{
a=a+1;
worker.postMessage(a);
},3000);
}else if(e.data=== "+2"){
setTimeout(()=>{
a=a+2;
worker.postMessage(a);
},1000)
}
}
Run Code Online (Sandbox Code Playgroud)
这是我的主文件:main.ts
let w =new Worker("./worker.ts", {type: "module"})
let wf =async (op: string)=>{
w.postMessage(op);
return new Promise<any>((res,rej)=>{
w.onmessage=res;
});
}
(async()=>{
let f1 = await wf("+1");
console.log("f1",f1.data);
})();
(async()=>{
let f2 = await wf("+2");
console.log("f2",f2.data);
})()
Run Code Online (Sandbox Code Playgroud)
只能f2归还,就f1 …
大家好,我有一个非常复杂的画布编辑器,允许用户使用 Konvajs 和 Gifler 库选择视频背景、添加文本、gif 和 Lottie 动画。它已经走了很长一段路,但是我正在尝试加快我的画布应用程序的性能。我已经阅读了很多关于屏幕外画布的内容,但我不太明白。假设我有一个常规的 HTML 画布对象,我将如何创建一个离屏画布并将其吐回浏览器?理想情况下,我希望能够以 30 fps 的速度从画布中以无延迟的速度从数组中获取图像。我还担心,根据caniuse.com 的说法,屏幕外画布似乎尚未得到广泛支持。每当我尝试从我的画布创建屏幕外画布时,我总是得到:
Failed to execute 'transferControlToOffscreen' on
'HTMLCanvasElement': Cannot transfer control from a canvas that has a rendering context.
Run Code Online (Sandbox Code Playgroud)
正如我所说,我只是想弄清楚如何平滑地渲染我的动画,但不知道如何去做。这里的任何帮助都会很棒。这是代码。
<template>
<div>
<button @click="render">Render</button>
<h2>Backgrounds</h2>
<template v-for="background in backgrounds">
<img
:src="background.poster"
class="backgrounds"
@click="changeBackground(background.video)"
/>
</template>
<h2>Images</h2>
<template v-for="image in images">
<img
:src="image.source"
@click="addImage(image)"
class="images"
/>
</template>
<br />
<button @click="addText">Add Text</button>
<button v-if="selectedNode" @click="removeNode">
Remove selected {{ selectedNode.type }}
</button>
<label>Font:</label>
<select v-model="selectedFont">
<option value="Arial">Arial</option>
<option …Run Code Online (Sandbox Code Playgroud) 我有一个 textarea,它将用用户输入的内容填充另一个部分,只要我不输入以“<”开头的任何内容,我的代码就可以正常工作。每当我有一个像“<anything else can follow”这样以“<”开头的字符串时,它就不会设置innerhtml。
var text = "<i wont print"
text = "i will print!"
trans_txt.innerHTML = text;
Run Code Online (Sandbox Code Playgroud)
“<”是innerhtml的某种覆盖字符吗?我想知道是否有人知道发生了什么,是否有一种方法可以将文本 var 更改为纯字符串,而不必担心我的字符串不显示。
编辑:我意识到这一点是因为默认的 textarea 消息是“<text area”
javascript ×11
html ×3
html5-canvas ×3
canvas ×2
css ×1
deno ×1
filereader ×1
firefox ×1
getusermedia ×1
html2canvas ×1
image ×1
konvajs ×1
mediastream ×1
mozilla ×1
node.js ×1
openlayers ×1
svg ×1
typescript ×1
web-worker ×1