Postprossing error - copyTexImage2D: framebuffer is incompatible format
I'm trying to use the post effects as presented in the samples, but I keep getting the following error in my console and nothing is rendering. Any ideas on what might be causing this? I don't think anything that matters is different than in the postprocessing example.
WebGL: INVALID_OPERATION: copyTexImage2D: framebuffer is incompatible format
renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColorHex(0x000000, 1)
renderer.sortObjects = false;
...
composer = new THREE.EffectComposer( renderer )
composer.addPass( new THREE.RenderPass( scene, camera ) )
effect = new THREE.ShaderPass( THREE.DotScreenShader )
effect.uniforms[ 'scale' ].value = 4
composer.addPass( effect )
effect = new THREE.ShaderPass( THREE.FXAAShader )
composer.addPass( effect )
render = ->
requestAnimationFrame(render)
composer.render()
render()
You could try to add alpha to the WebGLRenderer default framebuffer using:
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
I found out the error, there's a bug where EffectComposer is incompatable with LensFlare, submitting a change.
Basing on #Axiverse suggest, if your problem come with usage of lens flare (or maybe anything else...), simply add your own render target.
//...
var pixelRatio = renderer.getPixelRatio();
var width = Math.floor( renderer.context.canvas.width / pixelRatio ) || 1;
var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1;
var renderTarget = new THREE.WebGLRenderTarget(width, height, {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat, // <-- The line that fix all for me
stencilBuffer: false
});
var effectComposer = new THREE.EffectComposer(webGLRenderer, renderTarget);
Related
Im trying to make a graph like this:
https://www.google.com/finance?q=BCBA:PAMP
I have a line chart in chart.js, now I want to add labels (like the letters A, B, C) for certain dates.
Can't find a doc/example to start from. Any idea?
If its more simple to do with another library a recommendation is more than welcome.
Thanks!
Unfortunately, there is no native support in chart.js for what you are wanting. However, you can certainly add this capability using the plugin interface. This requires that you implement your own logic to draw the canvas pixels at the locations that you want them. It might sound challenging, but its easier than it sounds.
Here is an example plugin that will add a value above specific points in the chart (based upon configuration).
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) {
var showOnly = chartInstance.config.options.showDatapoints.showOnly || [];
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = fontColor;
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
if (showOnly.includes(dataset.data[i])) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
}
});
}
}
});
It allows you to configure which points you want to annotate using this new configuration. The showOnly option contains the points that you want to label.
options: {
showDatapoints: {
display: true,
showOnly: [3, 10, 9]
},
}
Obviously, this only adds the datapoint value at the specified points, but you can just change the plugin to paint whatever you want to show instead. Simply replace ctx.fillText(dataset.data[i], model.x, yPos) with different code to render something different on the canvas.
Here is a codepen example to show you want it looks like.
In bing maps v8, How can i set opacity on AnimatedTileLayer? The opacity value I set below (0.2) is not working.
var tileSources = [];
for (var i = 0; i < timeStamps.length; i++) {
var path = 'https://api.weather.com/v3/TileServer/tile/radarFcst?fts={fts}&ts={ts}&xyz={x}:{y}:{zoom}&apiKey={apiKey}';
path = path.replace('{apiKey}', weatherApiKey);
path = path.replace('{fts}', timeStamps[i]);
path = path.replace('{ts}', tsNow);
var tileSource = new Microsoft.Maps.TileSource({
uriConstructor: path
});
tileSources.push(tileSource);
}
EmptyOverlay.prototype = new Microsoft.Maps.CustomOverlay();
function EmptyOverlay() {
}
EmptyOverlay.prototype.onAdd = function () {
var container = document.createElement('div');
this.setHtmlElement(container);
};
var overlay = new EmptyOverlay();
vm.map.layers.insert(overlay);
var animatedLayer = new Microsoft.Maps.AnimatedTileLayer({
mercator: tileSources,
frameRate: 500,
opacity: 0.2,
loadingScreen: overlay
});
vm.map.layers.insert(animatedLayer);
The AnimatedTileLayer doesn't have an opacity option: https://msdn.microsoft.com/en-us/library/mt772207.aspx I'll add this as a feature request.
If you need this right way there is a hack that can be used to do this:
var opacity = 0.2;
//Add an event handler that fires for each frame of the animation.
Microsoft.Maps.Events.addHandler(animatedLayer, 'onFrameLoaded', function (e) {
//Check the opacity of the root html element used by the animated tile layer if it is not set to the current opacity.
if (animatedLayer._htmlElement && animatedLayer._htmlElement.style.opacity !== opacity) {
animatedLayer._htmlElement.style.opacity = opacity;
}
});
Note, this is a hack and is not officially supported, so it can break at anytime, and is not recommended for use in production apps.
I am using barcodewriter to write datamatrix barcoe. While most of the times it creates correct square style datamatrix barcode, for some of text it creates rectangular shaped barcode.
For inputData like below it creates rectangular barcode
8004600000070000017
C/TH PAUL PENGELLY
C/TH NICKY PARSONS
C/TH ROSEMARIE BARTOLOME
while for others it creates square styled: CTH HEKT-WOODROW MORGAN
800460000007
800460000007000001700000
i am usinf this code to generate code:
BarcodeWriter writer = new BarcodeWriter() { Format = BarcodeFormat.DATA_MATRIX };
var img = writer.Write(inputData);
return new Bitmap(img);
img.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
dto.BarcodeImage = ms.ToArray();
How can I make sure that I always get Square shaped datamatrix?
I have alread tried adding height,width options.
Thanks
There is SymbolShape option which can be used to force shape .
DatamatrixEncodingOptions options = new DatamatrixEncodingOptions()
{
Height = 300,
Width = 300,
PureBarcode = true,
Margin = 1,
SymbolShape = SymbolShapeHint.FORCE_SQUARE
};
It is not easy to detect but after careful reviewing, I found how to do it.
readonly DataMatrixWriter DMencoder = new();
readonly Dictionary<EncodeHintType, object> DMencodeType = new()
{
[EncodeHintType.DATA_MATRIX_DEFAULT_ENCODATION] = Encodation.C40, //Optional
[EncodeHintType.DATA_MATRIX_SHAPE] = SymbolShapeHint.FORCE_SQUARE
};
DMencoder.encode(matrixText, BarcodeFormat.DATA_MATRIX, 100, 100, DMencodeType)
I'm trying to combine jcrop and scrimage but I'm having trouble in understanding
the documentation of scrimage.
The user uploads an image. When the upload is done the user is able choose a fixed
area to crop with Jcrop:
upload.js
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#progress").find(".progress-bar").css(
"width",
progress + "%"
);
},
done: function (e, data) {
$("#cropArea").empty();
var cropWidth = 210;
var cropHeight = 144;
if(data.result.status == 200) {
var myImage = $("<img></img>", {
src: data.result.link
}).appendTo('#cropArea');
var c = myImage.Jcrop({
allowResize: false,
allowSelect: false,
setSelect:[0,0,cropWidth,cropHeight],
onSelect: showCoords
});
}
}
});
});
Example:
When the user is satisfied the coordinates will be posted to the server and there is where the magic should happen.
Controller:
def uploadFile = Action(multipartFormDataAsBytes) { request =>
val result = request.body.files.map {
case FilePart(key, filename, contentType, bytes) => {
val coords = request.body.dataParts.get("coords")
val bais = new ByteArrayInputStream(bytes)
Image(bais).resize(magic stuff with coords)
Ok("works")
}
}
result(0)
}
If i read the docs for scrimage and resize:
Resizes the canvas to the given dimensions. This does not scale the
image but simply changes the dimensions of the canvas on which the
image is sitting. Specifying a larger size will pad the image with a
background color and specifying a smaller size will crop the image.
This is the operation most people want when they think of crop.
But when trying to implement resize with an inputstream Image(is).resize() I'm not sure I how should do this. Resize takes a scaleFactor, position and color... I guess I should
populate the position with the coords I get from jcrop??, and what do I do with the scaleFactor? Anybody got a good example of how to do this this?
Thank you for two great libs!
Subimage is what you want. That lets you specify coordinates rather than offsets.
So simply,
val image = // original
val resized = image.subimage(x,y,w,h) // you'll get these from jcrop somehow
I'm trying to take a screenshot using html2canvas:
var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {
var urlData = canvas.toDataURL("image/jpeg");
}});
My body's background is transparent, and therefore urlData because of jpeg has black background (not white like in browser).
How can I fix this behavior and make background color white in this case?
I modified temporary: _html2canvas.Util.isTransparent from
_html2canvas.Util.isTransparent = function(backgroundColor) {
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};
to
_html2canvas.Util.isTransparent = function(backgroundColor) {
return (backgroundColor === "transparent" ||
backgroundColor === "rgba(0, 0, 0, 0)" ||
backgroundColor === undefined);
};
and after that it was enough to call html2canvas with background parameter set:
html2canvas(screenshotElement, {
background: '#FFFFFF',
onrendered: function (canvas) {
// ...
}
});
For me... it makes sense to consider transparent a background that is undefined.
Try this
var body = document.getElementById("body")
$(body).html2canvas({background:'#fff', onrendered: function( canvas ) {
var urlData = canvas.toDataURL("image/jpeg");
}});
I'd say, it's even simplier now(30/05/18) - just pass backgroundColor: null in html2canvas options:
html2canvas(
document.querySelector("#some-id-to-export"),
{backgroundColor: null}
).then(canvas => {$("#id-to-render-transparent-bg-img").html(canvas);});
https://stackoverflow.com/a/23928038/1815624
simply add css background-color:#ffffff to your table :)
hope this helps
I wrapped the content into a div for each desired page and gave class="pdfpage" then set the css as pdfpage{background:#FFFFFF;}
As I had commented it was not first thoughts that I needed to set the background of the rendered element as white since it was white already...But in truth it was colorless...
var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {
var urlData = canvas.toDataURL("image/jpeg");
},
background: '#fff'});
Two years later but updated version should accept a parameter like this . . .
No worries, Now just add background: '#FFFFFF' , its working fine
html2canvas(element, {
background: '#FFFFFF',
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
If you need the actual image data to be non-transparent, use fillRect(0, 0, width, height) with fillStyle 'white'.
Another way to do it but it's quite slow (few milliseconds maybe), is to use getImageData and putImageData and iterate threw each pixel to check rgba values and change them
html2Canvas and ngxcharts teams seem to have closed the bugs on this issue without providing any solution.
Setting up fill property for rect via css classes didn't work.
This is how I ended up solving it, surprisingly it works:
let rectElements = Array.from(document.getElementsByTagName('rect'));
if (rectElements.length > 0) {
rectElements.forEach(rect => {
rect.setAttribute('fill', '#ffffff');
});
}