I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.
Related
I want to include an audio player that plays a wav file that is loaded from a URL in a React component. Although this should work straight forward with the HTML5 <audio> element, I cannot get it to play (I just see the control elements).
I tried to play a .mp3 with the same code, which works. I checked in Chrome and Safari which are supposed to support .wav - it works in neither of them. I tried to replace the <audio> element with a react-audio-player, a react-player and a react-sound element - none of them works.
When I open the URL, the sound is downloaded as an attachment.
render() {
const wavUrl = config.fileServer+this.props.values.id+".wav";
return (
<audio controls>
<source src={wavUrl} type="audio/wav" />
Your browser does not support the audio element.
</audio>
);
}
I expect to see an audio controller that starts playing the sound when I press play. Instead, I see an audio controller that does nothing when I press play, and that claims that the audio file is 0 seconds long. I checked the URL - it is correct if I past it as URL in my browser directly.
If you are using create-react-app you have to import the audio file.
import wavUrl from './path/to/file';
// ... rest of code here
As mentioned Kitanga, you can use import to load files from public (instead of full URL access), example:
import somefile from '../public/assets/mp3/test1.mp3'
then
Play extends Component {
...
}
render(
<Play file=somefile>
)
But if you found webpack error message at start: "You may need an appropriate loader to handle this file type..." then seems you need to load appropriate extension npm package to read it and configure webpack.config.js, example:
...
module: {
rules: [
{
test: /\.mp3$/,
loader: "file-loader"
},
...
]
...
...
if "file-loader" not installed then use example:
npm install --save file-loader
I am trying to load a CSV file in my js class and I am unable to do so in react native. This file is available locally. Not downloaded. Whenever I give a path to the CSV file, I get an error that says The module could not be found. No such module exists. I have tried placing the CSV in various folders and also at my project root level. It does not work. I noticed images do not face the same problem.
I have even tried doing this.
https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/
Again it works for images but strangely not for CSVs.
I have tried the import statement, require statement and even relative path for the files. Same error every time.
I am new to react maybe I am missing some step?
EDIT: Two of the ways I tried
import RNFS from 'react-native-fs';
import Papa from 'papaparse';
import CSVData from './CSVData.csv';
function loadAllCSV()
{
console.log('Loading CSV');
var path = './CSVData.csv';
console.log(path);
const fileContents = RNFS.read(path);
console.log('File Data ' + fileContents);
Papa.parse(CSVData, {
download: true,
delimiter: '\t',
complete: function(results) {
console.log('ZOMBIIIIEEEE');
console.log(results);
}
});
}
Error:
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module ./CSVData.csv from /Users/abc/xyz/SearchPage.js: The module ./CSVData.csv could not be found from /Users/abc/xyz/SearchPage.js. Indeed, none of these files exist:
/Users/abc/xyz/CSVData.csv(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
/Users/abc/xyz/CSVData.csv/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json) (null))
Adding the .CSV files to the project assets bundle in iOS fixed this problem for me.
Use Xcode to place the files in the project in the Project Settings under the Build Phases Tab check if the Assets are included in the Copy Bundle Resources Section. Add the files to the list here incase they are missing.
I am trying to show a static pdf in React app. I have tried a lot of packages:
react-pdf
react-pdf-js
react-pdf-js-infinite
simple-react-pdf
pdfjs-dist
react-pdf-pages
They often say that we can use the URL, or pdf file for the props for the PDF component easily, but I cannot use either.
I had two main errors.
As I want to use myPDF for the props for the component, I write this:
import myPDF from 'path/to/pdf_file';
then, render_some_component pdf:{myPDF}
Here is the error:
ModuleParseError in
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
(When I comment that line, this kind of error disappears)
I used the file-loader in webpack config, I have tried many different ways but failed.
I use the pdf file directly for the props like this:
render_some_component pdf:{'path/to/pdf_file'}
In the Console:
Warning: Setting up fake worker.
11:23:55.962 pdf.worker.js:349 Warning: Ignoring invalid character "33" in hex string
11:23:55.963 pdf.worker.js:349 Warning: Ignoring invalid character "79" in hex string
...
There are a lot of 'Ignoring invalid character' like that and it always ends with:
localhost/:1 Uncaught (in promise) InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
In the Network, Headers, I see:
Request URL:http://localhost:3000/myPdfFile.pdf
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:3000
but In the Network, Response, I see just the HTML layout.
I think the pdf file is loaded correctly but the package cannot recognize its PDF structure.
Except that two main errors, I had another error related to the Worker used in the packages but I don't know how to fix it:
Uncaught DOMException: Failed to construct 'Worker'
(This is something relates to Chrome as people say Chrome does not allow Worker in the local server)
Any help is highly appreciated as I am stuck in this in 4 days already.
Can you pleas clarify what you main task is?
If I understood it right you want to display a PDF file that already exists in a part of your application? You don't want to create a new PDF with JavaScript.
If you want to just show a PDF have you tried to use iframe?
Something like this:
<iframe
title="file"
style={{ width: '100%', height: '100%' }}
src={downloadURL}
/>
You ca use here also relative paths to the file from the location where your Component is or use full URLs to the file.
I followed this tutorial to install the Wiris plugin on a new installation of Drupal.
Once the installation was complete and I clicked on the Wiris icon to begin adding a formula, the popup window does NOT load and I get the following error in the console area:
Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/' in a call to 'postMessage'.
at http://*.*.*.*/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js:19:22
The code causing the problem is as follows:
e.source.postMessage(postVariable, _wrs_conf_path);
I'm at a loss how to deal with this issue.
I don't have a complete fix but I was able to get it working locally by replacing _wrs_conf_path with the base path of my dev box. _wrs_conf_path was evaluating to a relative path to the plugins folder.
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_conf_path);
}
with
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_currentPath);
}
in the /sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js file.
Edit: I replaced _wrs_conf_path with one of their internal variables _wrs_currentPath and that seemed to fix the issue.
I'm using this awesome project called bootstrap-map-js.
A simple framework for building responsive mapping apps with ArcGIS
and Bootstrap.
Since Esri ArcGIS JavaScript API states that they support IE7+ I thought the amazing bootstrap-map-js project would also be compatible with IE 7. Maybe it is and the problem is in my code...
I'm getting an Invalid Argument error with no further info on IE 11 Developer Tools console window when simulating the page on IE 7/8 document modes. IE 9 onwards works great. All other browsers work great too! :) Only finicky IE refuses to work as always...
Looks like dojo.require is barking somewhere. See this related question: Dojo nested requires on IE7 and IE8 causes Invalid Argument Exception
If I remove the reference to bootstrapmap.js and the var map = ... declaration, then the code works and I see hey Leniel! otherwise the code breaks and I see the Invalid argument. The code breaks in the call to BootstrapMap.create.
Can anyone shed some light on what's going on with finicky IE? Is there anything I can do to see more from the error? As you see in the image, there's no message, description, etc. :(
Here's the minimum code I had to assemble to get to what was causing the error:
<!-- ArcGIS JavaScript API v3.8 -->
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.8/3.8/init.js"></script>
<script type="text/javascript">
function init()
{
require([
"esri/map",
"/myproject/Scripts/bootstrapmap.js",
"esri/layers/FeatureLayer"
], function(
Map,
BootstrapMap,
FeatureLayer
)
{
// Get a reference to the ArcGIS Map class
var map = BootstrapMap.create("mapDiv", {
basemap: "oceans",
center: [-117.789, 33.543],
zoom: 12
});
alert('hey Leniel!');
});
}
dojo.addOnLoad(init);
</script>
I made some progress on this issue as you can read here.
I read Configuring Dojo with dojoConfig and then added this before ArcGIS JS API script tag:
<!-- set Dojo configuration, load Dojo -->
<script>
dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
async: true
};
</script>
Now I get a more descriptive error instead of only Invalid argument as before. IE Dev Tools shows this:
SCRIPT87: Invalid argument.
File: init.js, Line: 136, Column: 65
This is line 136 in init.js when I click on the link provided by IE Dev Tools:
b;b=d[b]?"cssFloat"in f.style?"cssFloat":"styleFloat":b;if(3==k)return q?g(f,e):f.style[b]=e;for(var r in b)l.set(a,r,b[r]);return l.getComputedStyle(f)};return l})},"dojo/dom-geometry":function(){define(["./sniff","./_base/window","./dom","./dom-style"],function(b,n,k,m){function l(a,b,d,c,h,f){f=f||"px";a=a.style;isNaN(b)||(a.left=b+f);isNaN(d)||(a.top=d+f);0<=c&&(a.width=c+f);0<=h&&(a.height=h+f)}function r(a){return"button"==a.tagName.toLowerCase()||"input"==a.tagName.toLowerCase()&&"button"==
Sounds like IE 7/8 is barking about some crazy CSS manipulation done by ArcGIS JS API.
Fixed it connecting the dots...
Searched for NaNpx e's value as I had never seen that before. Found this jQuery ticket.
Followed the advice given there and changed that return in line 136,
from:
return q?g(f,e):f.style[b]=e;
to:
return q?g(f,e):f.style[b]=(e=='NaNpx'?'0px':e);
Note: I'm using jQuery 1.11.0 which supports IE 7.